0

这是我的设置，我有两个并排的 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 链接 - http://jsfiddle.net/Rx93t/

4

2 回答 2

0

看小提琴

  • 当您单击链接时，我使用了 jQuery scrollTo插件来平滑滚动。
  • 然后我有一个代码，我在其中检查窗口滚动事件并在向下滚动时应用类 nav-fixed。

希望这是你想要的。

点击滚动

   $('#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');
      }

    });
于 2013-04-03T15:58:03.850 回答
0

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

所以，

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/

于 2013-04-03T16:04:18.367 回答