修复页面滚动时标题下方 div 的位置答案

【问题标题】：Fixed position of a div below header while page scrolling修复页面滚动时标题下方 div 的位置
【发布时间】：2014-05-21 15:57:05
【问题描述】：

我希望标题下方有一个 div 以在滚动时占据顶部固定位置。如果页面向上滚动，那么标题也需要显示。

CSS

.header {
height:100px;
background:#ffe1d8;
width:100%;
}
.converter {
height:100px;
background:#9fff42;
width:100%;

}
.content {
width:100%;
background:#faff70;
min-height:800px;
}
.fixed-pos {
position:fixed;
top:0;
z-index:1000;
}

HTML

  <div class="header">&nbsp;</div>
  <div class="converter">&nbsp;</div>
  <div class="content">&nbsp;</div>

jQuery

 $(document).ready(function() {
 $( window ).scroll(function() {
     $( ".converter" ).addClass("fixed-pos");
     if ($( ".converter" ).scrollTop(100 )) {
         $( this ).removeClass("fixed-pos");
     }
 });
 });

JsFiddle这里。

在上面的小提琴中，绿色部分（.converter）在向下滚动时占据顶部的固定位置。如果屏幕向上滚动，它将占据与顶部相同的位置，将标题（粉红色）隐藏在其上方。我希望在屏幕向上滚动到最顶部时显示 .converter div 上方的标题。

有什么帮助吗？

【问题讨论】：

标签： jquery html css

【解决方案1】：

应该是

$(window).scroll(function() { //OnScroll, invoke
    if($(this).scrollTop() > 100) { 
       //If the current scroll position is more than 100, add class
        $( ".converter" ).addClass("fixed-pos");
    } else {
        //Else remove it
        $( ".converter" ).removeClass("fixed-pos");
    }
});

Demo

您的解决方案有什么问题？首先，您立即在滚动条上添加类，而不是使用 if 条件删除，而不是使用 ~~$(".converter")~~ 应该使用 $(this) 引用 window em> 比较

感谢@A. Wolff使用.toggleClass()在很大程度上重构了代码

$(window).scroll(function() {
    $(".converter").toggleClass("fixed-pos", $(this).scrollTop() > 100);
});

Demo 2

【讨论】：

+1 但你可以切换类：$(".converter").toggleClass("fixed-pos", $(this).scrollTop() > 100);jsfiddle.net/CjPAa/5

【解决方案2】：

这可能对你有用：

http://jsfiddle.net/CjPAa/2/

$(document).ready(function() {
     $( window ).scroll(function() {

         var defaultPosition = $('.header').offset().top + $('.header').outerHeight();

         if($(window).scrollTop() > defaultPosition){
             $( ".converter" ).addClass("fixed-pos");
         } else {
             $( ".converter" ).removeClass("fixed-pos");
         }

     });
});

【讨论】：

请注意，如果您最终更改了 '.header' 的高度，此代码仍然可以正常工作。如果你使用'> 100'，你的'.header'高度应该总是100px。问候

【解决方案3】：

你可以只用 css...你根本不需要 jquery

.header {
height:100px;
background:#ffe1d8;
width:100%;
position:fixed;
}
.converter {
height:100px;
margin-top:100px;
background:#9fff42;
width:100%;
position:fixed;
}
.content {
width:100%;
background:#faff70;
min-height:800px;
}

【讨论】：

你问错了，他希望在用户滚动文档特定偏移量后修复元素:)

【解决方案4】：

我不完全确定您的结果应该是什么。但也许是这样的：

(function () {
    var scrollMinimum = 0; // minimum scroll offset to fix the bar
    var $scrollTopBar = $('.converter');
    var $win = $(window);
    var visible = false; // whether the bar is currently shown

    $win.on('scroll', function(){
        if (visible == false && $win.scrollTop() > scrollMinimum){
            visible = true;
            $scrollTopBar.addClass('fixed-pos');
        } else if (visible == true && $win.scrollTop() <= scrollMinimum) {
            visible = false;
            $scrollTopBar.removeClass('fixed-pos');
        }
    });
})();

Fiddle

【讨论】：