冻结元素(位置:固定)用于特定的滚动范围

Question

我在此站点上工作（http://styleguide.co/medhelp/）有5个部分。对于其中一个部分（样式），只要用户在该部分滚动时，我都想在可见的框架中坚持下去。

。

这是我迄今为止所做的 - 我要讲的是标题＆amp;在本节的顶部开始之后，Sidenav坚持下去：

$(window).scroll(function(event) {
    var sw = $('.fixed'),
    pg = $('.styles'),
    diff = pg[0].offsetTop - window.pageYOffset;
    if (diff < 80 ) {
        $('.fixed').css('position', 'fixed');
        $('.fixed').css('top', '160px');
        $('.styles').css('position', 'fixed');
        $('.styles').css('top', '70px');
    }
    else {
        $('.fixed').css('position', 'relative');
        $('.fixed').css('top', '0px');
        $('.styles').css('position', 'relative');
        $('.styles').css('top', '0px');
    }
});

我似乎找不到一种使章节标题"样式"和Sidenav出现/消失的好方法，而我从该部分滚动/从该部分滚动。有建议吗？我能做得更好吗？JSFIDDLE中的一个简单的解决方案演示确实会有所帮助！

请单击此链接＆amp;向下滚动/向上了解我指的是：http：//styleguide.co/medhelp/

Answer 1

我不会给您一个小提琴，但是您需要确定下一节何时会根据其偏移量的偏移来确定。目前，您正在做的是：

// if difference top and element < 80 -> fix to top, else position is relative

首先，这意味着条件将永远不会被撤销。您需要做的才能继续：

// once next contact section comes into screen 
//(offset from the top of the screen <= screen height), give 
var winHeight = $(window).height();
var calcTop = 80 - (winHeight - (winHeight - $('#nextSelector').offset().top);
$('.fixed').css('top', calcTop);

这将使您的文本滚动，随着新部分的出现。我希望这有帮助。另外，滚动后，它不会重新粘贴，但您可能会意识到这一点。