Javascript jQuery– ；在scroll中的特定点处/之后添加具有可变长度内容的类

一般来说，jQuery和JavaScript都是新手。我在上模拟了一个我的问题示例，并在下面进行了解释

我有一个div，当用户滚动经过页面上的某个点后，它被分配了一个“fixed”类，因此它跟随用户沿着页面向下移动。这本身就可以很好地工作

问题是，div上面的内容可以切换为show/hide——当它被显示时，固定类仍在被应用于如果它被隐藏的话会被应用的点，所以它看起来像是“跳转”

我如何告诉我的固定类添加函数上面的div已经显示/隐藏，从而调整添加“固定”类的点

谢谢

HTML: JavaScript:

---

无论何时，只要您修改了“固定”div的基本位置，就需要重新快照其基本位置

例如，在演示代码中，重新测量

toggle（）

调用中的顶部。
请参阅下面修改的代码，或在上查看它的实际操作

---

我自己想出来的！如果其他人也有同样的问题，并且遇到了这个问题，下面是我修改后的代码和对我所做工作的最好（尽管是业余）解释：

JS:

HTML:

JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
正文{margin:0；padding:0；}
#文章{宽度：400px；高度：1000px；浮动：左；右边距：20px；填充：20px；背景：#eee；}
#导航{宽度：200px；浮动：左；背景：#ff0；填充：20px；}
#抽屉{宽度：660px；填充：20px；颜色：#fff；背景：#000；边距底部：10px；}
.fixed{位置：fixed；左：460px；顶：0px；}
这是抽屉里的东西。默认情况下，它是隐藏的。当它显示时，当我们滚动时，导航跳转到页面顶部有问题
这是一篇很长的文章！
Lorem ipsum dolor sit amet，是一位杰出的佩林斯克尔斯（Pellenteskue）的领袖，他是一位杰出的政治家。在扫描电镜等设备上安装电子设备

Div height已设置为1000px，以便在不添加太多填充文本的情况下强制滚动

当我们滚动过文章的开头时，这应该跟随页面，当我们回到顶部时，“粘”回原位。
​​

JS Bin上的工作示例-

top

设置为全局变量，以便在函数之间使用。首先，它在文档加载时设置，然后每当抽屉切换功能

$（“#抽屉a”）运行时，它就会被重新定义。单击（函数（e）

）

---

所以现在，每当运行

$（window）.scroll

时，它都有一个正确的值

top

，它的行为与我所希望的一样。

外部站点可以“poof”--在这种情况下，这个问题会变得非常模糊。你在模型方面做得很好，但总是尝试在问题本身中包含足够的代码来演示这个问题。数字-我在写我自己的问题时得到了正确的答案。谢谢，我会看看你的代码，看看我是否能弄清楚你是如何做到的，但与此同时，你觉得我在下面提出的解决方案怎么样？（编辑：格式化）我想这里的优点是，通过定义

GetVertOffset

函数，我可以在其他领域重复使用它，我可能想知道某个东西离窗口顶部有多远。谢谢！这应该可以工作，但它内置了一些定时炸弹…（1）

top

在

$（document）.ready（）

中定义，当事件处理程序启动时，可能会在其他地方被覆盖或不可用。请遵循DRY原则（）以避免将来的维护难题。

<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>

  #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; }

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

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

});

$(document).ready(function() {
  $('#drawercontents').hide();
  var top =$('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0));
  $('#drawer a').click(function(e){
    e.preventDefault();
    $('#drawercontents').toggle('fast', function() {
      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');
    }
  });
});

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  body { margin: 0; padding: 0; }
  #article { width: 400px; height: 1000px; 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; }
</style>
</head>
<body>
  <div id="drawer">
    <a href="#">Click here to toggle drawer</a>
    <p id="drawercontents">Here is the stuff in the drawer. It is hidden by default. When it is shown there is a problem with the nav jumping to the top of the page when we scroll.</p>
  </div>
  <div id="article">
    <h2>This is a long article!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit pellentesque sed egestas id, iaculis ut erat. Praesent ut neque vel dolor lacinia eleifend at sit amet sem, etc etc</p>

    <p>Div height has been set to 1000px to force scrolling without adding too much filler text</p>
  </div> <!-- end article -->
    <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>
</body>
</html>​​