Question

使用jQuery滚动功能创建一个粘性标题，有时在特定高度（我猜）当我向下滚动时，返回到页面顶部。

这是我的功能：

$(window).scroll(function(e){
    $('#main').toggleClass('fixed', $(this).scrollTop() > $('#header').height()+25);
});

我该如何解决这个问题？

Answer 1

您可以尝试以下代码

HTML

<div id="main">
  <div id="header"></div>
  <div id="content"></div>
</div>

JS

$(window).scroll(function(){
if ($(window).scrollTop() >= 2) {
   $('#header').addClass('fixed');
   $("#content").css({"margin-top": $('#header').outerHeight() +"px"});
}else {
   $('#header').removeClass('fixed');
    $("#content").css({"margin-top":"0px"});
}
});

CSS

#header{
  height : 90px;
  background-color : grey;
  width : 100%;
 }
.fixed{
 position: fixed;
 top:0; left:0;
 width: 100%;  
 z-index: 9999;  
}

#content{
  height : 105vh;
}

Answer 2

问题在于固定元素在DOM中不占用空间。所以这里发生的事情是你的标题占用空间，滚动页面，用position:fixed设置标题，这样它就不再占用空间，所有元素都向上移动，滚动条消失。

要防止这种行为，您需要添加＆＃34;缺少的高度＆＃34;更改课程时的文档。例如StickyKit使用的通用技术，如果要添加占位符div。

您可以在此处查看基本代码：https://jsfiddle.net/jaL765t1/

var flag = false;
$(window).scroll(function(e){
  var passed_point = $(this).scrollTop() > $('#header').height()+25;

  if(passed_point && !flag){
    var surrogate = $('<div>', {
        'class' : 'js-surrogate',
        css : {
        height : $('#header').height()
      }
    });
    $('#header').before( surrogate );
    $('#main').addClass('fixed');

    flag=true;
  }else if(!passed_point && flag){
    $('#main').removeClass('fixed');
    $('#header').prev('.js-surrogate').remove();
    flag=false;
  }  
});

当然，此代码不是好，但您可以轻松地将其作为起点。

Answer 3

我认为你正试图做这样的事情。

如果你想要修复标题，为什么要把课程放在main？

$(function(){
  $(window).scroll(function(e){
    //console.log($(this).scrollTop() > $("#header").height())
     //^--console.log() for testing the Boolean 
      $("#header").toggleClass("fixed", $(this).scrollTop() > $("#header").height() )
  })
})

*{
  margin: 0;
  padding: 0;
}
#header{
  height:90px;
  background: purple;
}
.fixed{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
}
.content{
  height: 4000px;
  background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="header">
  Header
</div>
<div class="content">
  content
</div>

jQuery窗口滚动，scoll down回来了

3 个答案: