Question

我坐在这里创建自己的小网站。对于我的第一个响应式布局，我想在200px的滚动后向下滑动我的标题并修复它。

我这里有这个代码：

 $(window).scroll(function(){
  var header = $('header'),
      scroll = $(window).scrollTop();

  if (scroll >= 200) header.addClass('fixed');
  else header.removeClass('fixed');
});

用于在200px之后修复标题。但这个解决方案有点难。希望您能够帮助我。感谢您的支持。

Answer 1

我认为您可能忘记将类添加到标头对象中。如果你有一个带有class =＆＃39; header＆＃39;的div，那么你的变量声明应该是：

var header = $('.header'),

以下是link to a jsfiddle，其中包含此代码的示例。

Answer 2

这可能会给你一个开始。 注意添加一个布尔变量来限制添加/删除类的次数。

//javascript:
//Define variables outside the scroll function
var win = $(window), header = $('header'), isDown = false;

win.scroll(function(){
  //This function fires thousands of times, so limit that
    scrollpos = win.scrollTop();
  if ( !isDown && scrollpos >= 200){
    header.addClass('fixed');
    isDown = true;
  }else if ( isDown && scrollpos < 200)
    header.removeClass('fixed');
    isDown = false;
  }
}); //END window.scroll


<!-- HTML -->
<!-- Remember to add the jQuery library (just above `</body>` in document) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

向下滑动并固定标题

2 个答案: