Question

codepen http://codepen.io/mathiasvanderbrempt/pen/mJjjrx

我需要弄清楚为什么这个jquery不起作用......

当我的scrolltop（）到达第一部分时，我想让.navigationfx下拉（top = 0px）（我应该添加一个类还是id？）。因此，当它向后滚动时，我想让它向上移动（顶部= -30px）。

  $(function(){
  //last scroll will always save the current scroll position value
  var CurrentScroll = 0;
  $(window).scroll(function(event){
      var NextScroll = $(this).scrollTop();
      if (NextScroll > CurrentScroll){
         //codes related to down-ward scrolling here
                if    ($(window).scrollTop() > $('section').scrollTop())
              {
                $('navigationfx').css('top', '0px')
              }
              else {
                $('navigationfx').css('top', '-100px')
              }
      }
      else {
         //codes related to upward-scrolling here
                if ($(window).scrollTop() < $('section').scrollTop())
              {
                $('navigationfx').css('top', '-100px')
              }
              else {
                $('navigationfx').css('top', '0px')
              }
      }
      //Updates current scroll position
      CurrentScroll = NextScroll;
  });
});

CSS

  .navigationfx {
  visibility: ;
  position: fixed;
  z-index: 2;
  margin: 0 auto;
  padding: 5px 0 0 0;
  width: 100%;
  top: -50px;
  left: 0;
  background: rgba(250,250,250,0.5);
  text-align: center;
  color: #333;
  border-bottom: 1px solid #dddedf
}

Answer 1

少数事情：

您从匹配的集合中选择第一部分：

$('section').first();

由于该部分没有滚动，您必须使用偏移顶部：

$('section').first().offset().top;

不要反复扫描DOM以获取相同的元素。存储引用并根据需要使用它：

var $nav = $(".navigationfx");
var $firstSection = $('section').first();

不确定这是否是您想要的，但是，这里是your pen updated

P.S。可以使用.css()为此特定方案添加/更新top，而不必添加/删除类。

Answer 2

因为$('section').scrollTop()永久等于0。

将其更改为$("section").offset().top。

http://codepen.io/anon/pen/jPpeKv

Answer 3

当您将$('section').scrollTop()记录到控制台时，您会看到它始终返回零。相反，请使用$('section').offset().top。

您还缺少navigationfx选择器中的.。

$(function(){
    //last scroll will always save the current scroll position value
    var CurrentScroll = 0;
    $(window).scroll(function(event){
        var NextScroll = $(this).scrollTop();
        if (NextScroll > CurrentScroll){
            //codes related to down-ward scrolling here
            if($(window).scrollTop() > $('section').offset().top)
            {
                $('.navigationfx').css('top', '0px')
            }
            else {
                $('.navigationfx').css('top', '-100px')
            }
        }
        else {
            //codes related to upward-scrolling here
            if($(window).scrollTop() < $('section').offset().top)
            {
                $('.navigationfx').css('top', '-100px')
            }
            else {
                $('.navigationfx').css('top', '0px')
            }
        }
        //Updates current scroll position
        CurrentScroll = NextScroll;
    });
});

Answer 4

$('navigationfx') => $('.navigationfx')

我认为所有这些代码都可以缩短：

$(function(){
    $(window).scroll(function(event){
            var offset = $(window).scrollTop() > $('section').offset().top?'0px':'-100px';
            $('.navigationfx').css('top', offset);
    });
    $(window).scroll();
});

codepen：http://codepen.io/anon/pen/YXjJLG

codepen：jQuery .css（）在滚动过去锚点时编辑，反之亦然

4 个答案: