Question

这是我的设置，我有两个div并排float: left左侧的一个包含右侧div中文本的锚链接列表。因此，您单击左侧div中的标题，屏幕将跳转到右侧div中的相应内容。

正确的div包含大量文本，菜单非常小，所以我希望菜单始终保持在屏幕上。

我使用jquery工作，但有两个问题;

非常好，我希望它顺利。
它为菜单提供一个固定的位置，然后使右侧div移动到菜单后面。

我尝试通过使正确的div绝对并给它一个left值来解决第二个问题但是然后导致内容突然出现在包含div的底部而不是包含div扩展以适应内容。

我希望所有这一切都有意义，谢谢

JQuery的

$(window).scroll( function() {
    if ($(window).scrollTop() > $('.servicesLeft').offset().top)
        $('.servicesLeft').addClass('floating');
    else
        $('.servicesLeft').removeClass('floating');
});

CSS

.floating {
    position: fixed;
    top: 0;
}

修改

JSFiddle Link - http://jsfiddle.net/Rx93t/

Answer 1

请参阅fiddle

我使用jQuery scrollTo插件进行平滑滚动点击链接。
然后我有一个代码，我在其中检查窗口滚动事件并在向下滚动时应用导航固定类。

希望这是你想要的。

点击滚动

   $('#list li a').on('click', function () {
      $.scrollTo($(this).attr('href'), 750);
   })

窗口滚动事件

    $(window).scroll(function () {

      if (!$('.nav').attr('data-top')) {
        // If already fixed, then do nothing
        if ($('.nav').hasClass('nav-fixed')) {
            return;
        }
        var offset = $('.nav').position();
        $('.nav').attr('data-top', offset.top);
      }

      if ($('.nav').outerHeight() -$('.nav').attr('data-top')  <= $(this).scrollTop())   
      {
        $('.nav').addClass('nav-fixed');
      } 
      else 
      {
        $('.nav').removeClass('nav-fixed');
      }

    });

Answer 2

您只需将元素的初始顶部位置存储到变量中，然后测试窗口是否已通过它，否则您每次都会测试其新位置，从而导致闪烁。

所以，

var y = $('.servicesLeft').offset().top;

$(window).scroll( function() {
if ($(window).scrollTop() > y)
    $('.servicesLeft').addClass('floating');
else
    $('.servicesLeft').removeClass('floating');
});

要解决div在另一方面前的问题，您需要使用position: relative和z-index

小提琴：http://jsfiddle.net/Rx93t/3/

在屏幕上保持div

2 个答案:

点击滚动

窗口滚动事件