javascript – jQuery – 在滚动中的特定点之后/之后添加一个类,上面有可变长度的内容

2019年8月1日 235次阅读

一般来说,jQuery和
JavaScript都是新手.我在
http://jsbin.com/alibi3/2/模拟了我的问题的一个例子 – 下面有一个解释.

我有一个div,在用户滚动浏览页面上的某个点之后,被分配了一个“固定”类,因此它跟随用户进入页面.这个工作正常.

问题是,div上面的内容可以切换为显示/隐藏 – 当显示时,固定类仍然被应用在隐藏的位置,因此它似乎“跳”.

如何告诉我的固定类添加函数上面的div已被显示/隐藏,因此调整添加“固定”类的点？

谢谢.

HTML：

<div id="drawer">
    <a href="#">Click here to toggle drawer</a>
    <p id="drawercontents">Here is the stuff in the drawer; hidden by default.</p>
</div>
<div id="article">
    blah, blah...
</div>
<div id="nav">
    This should follow down the page once we scroll past the start of the article,
    and 'stick' back in place when we are back at the top.
</div>

CSS：

  #article {
    width: 400px;
    float: left;
    margin-right: 20px;
    padding: 20px;
    background: #eee;
  }
  #nav {
    width: 200px;
    float: left;
    background: #ff0;
    padding: 20px;
  }
  #drawer {
    width: 660px;
    padding: 20px;
    color:#fff;
    background: #000;
    margin-bottom: 10px;
  }
  .fixed { position: fixed; left: 460px; top: 0px; }

JavaScript的：

$(document).ready(function() {
  $('#drawercontents').hide();

  $('#drawer a').click(function(e){
    e.preventDefault();
    $('#drawercontents').toggle('fast');
  });

  var top =$('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function () {
    // what is the y position of the scroll?
    var y = $(window).scrollTop();    
    // whether that's below the start of article?
    if (y >= top) {
      // if so, add the fixed class
      $('#nav').addClass('fixed');
    } else {
      // otherwise, remove it
      $('#nav').removeClass('fixed');
    }
  });
});

最佳答案 每当你做一些修改“固定”div的基本位置的东西时,你需要重新快照它的基本位置.

例如,在您的演示代码中,重新测量toggle()调用中的顶部.
请参阅下面的修改后的代码,或者在http://jsbin.com/alibi3/8处查看它的实际操作.

var GblTop;

function GetVertOffset (srchStr)
{
    GblTop = $(srchStr).offset().top - parseFloat($(srchStr).css('marginTop').replace(/auto/, 0));
}


$(document).ready(function ()
{
    $('#drawercontents').hide();

    $('#drawer a').click (function (e)
    {
        e.preventDefault();
        $('#drawercontents').toggle('fast', function() {GetVertOffset ('#nav'); } );
    });


    GetVertOffset ('#nav');     //-- Sets GblTop

    $(window).scroll (function ()
    {
        // what is the y position of the scroll?
        var y = $(window).scrollTop();
        // whether that's below the start of article?
        if (y >= GblTop)
        {
            // if so, add the fixed class
            $('#nav').addClass('fixed');
        }
        else
        {
            // otherwise, remove it
            $('#nav').removeClass('fixed');
        }
    });

});
点赞