Jquery 在屏幕上放一个div

这是我的设置，我有两个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;
}

编辑

jsiddle链接-

请参阅

• 我已经使用jQuery插件来平滑滚动当你 点击一个链接
• 然后，我有一个代码，在其中，我保持对窗口滚动事件的检查 并在向下滚动时应用类别nav fixed。
  

希望这是你想要的。

点击滚动 窗口滚动事件

$（窗口）。滚动（函数（）{
if（！$（'.nav'）.attr（'data-top'））{
//如果已经修复，则不执行任何操作
if（$（'.nav'）.hasClass（'nav-fixed'））{
返回；
}
变量偏移量=$（'.nav'）.position（）；
$（'.nav'）.attr（'data-top'，offset.top）；
}
如果（$（'.nav'）.outerHeight（）-$（'.nav'）.attr（'data-top'）您只需要将元素的初始顶部位置存储到一个变量中，然后测试窗口是否已通过它，否则每次都针对其新位置进行测试，这会导致闪烁

所以

要解决div在另一个前面的问题，需要使用
位置：relative
和
z-index

Fiddle:
类似这样的事情？@ChrisMoutray做一些jsfiddle来想象你正在尝试做什么pls@okok“我不确定我是不是跟着？”克里斯莫托几乎说，菜单DIV从中间开始，我想把它移到上面，然后粘在上面。there@ChrisBull当你说中间时，你是指垂直还是水平居中于屏幕中心？谢谢-但我遇到的主要问题是，在我的示例中，内容移动到菜单后面-您需要在大屏幕上查看它，因为两个div并排排列
   $('#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');
      }

    });

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

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