如何阻止 jQuery 浮动 div 在页脚下方滑动？答案

【问题标题】：How to stop a jQuery floating div from sliding below the footer?如何阻止 jQuery 浮动 div 在页脚下方滑动？
【发布时间】：2012-01-26 18:38:46
【问题描述】：

我正在使用以下代码来实现一个滑动右侧边栏，当您向下滚动时它会向下滑动页面，并在您向上滚动时跟随页面向上移动。

$(function() {
     var offset = $("#col-right").offset();
     var topPadding = 40;
     $(window).scroll(function() {
         if ($(window).scrollTop() > offset.top) {
             $("#col-right").stop().animate({
                 marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#col-right").stop().animate({
                 marginTop: 30
             });
         };
     });
 });

目前它运行良好，除了它会滑到页脚之外。我想知道是否有人可以帮助我调整上面的代码，以便侧边栏在到达页脚时停止滑动？

另外，如果窗口比侧边栏短，如果有办法阻止侧边栏滑动，那也很好，因为目前，如果您在小窗口中查看页面，则无法查看滑动侧边栏的底部，因为它在您滚动时跟随窗口。

我希望我已经在这里说清楚了。

任何帮助将不胜感激:)

这是我找到初始代码的地方：

http://css-tricks.com/scrollfollow-sidebar/

这是我的 html 结构的示例：

<body>

    <div id="container">

        <div id="header">

        </div>

        <ul id="menu">
            <li class="current"><a href="#">Your Calculation</a></li>
            <li><a href="#how-it-works" class="slide">How it Works</a></li>
            <li><a href="#reasons-why" class="slide">10 Reasons Why</a></li>
            <li><a href="#about-darwin" class="slide">About Darwin</a></li>
            <li><a href="register.php">Register</a></li>
        </ul>

        <h1><span>Welcome Joe Bloggs.</span></h1>


        <div id="col-left">
            <p>example content</p>
        </div>

        <div id="col-right">
            <div id="help-col">
                <h2>Need Help?</h2>
                <p id="help-text"><img src="images/help-lady.jpg" />We’re here to assist you with your needs...</p>
                <div id="contact-details">
                    <p id="help-tel"><span>Tel:</span> xxxxxxxx</p>
                </div>
                <p>OR fill out this form:</p>

                <form id="help-form">
                    <input type="text" name="first-name" value="First Name" />
                    <input type="text" name="surname" value="Surname" />
                    <input type="text" name="email" value="Email"  />
                    <input type="text" name="telephone" value="Telephone" />
                    <textarea name="message" rows="10" cols="28">Leave a message</textarea>

                    <input class="submit-help" type="submit" value="Submit" />
                </form>
            </div>
        </div>
    </div>

    <div id="footer">
      <p id="footer-inner">&copy; All Rights Reserved.</p>
    </div> 

</body>
</html>

【问题讨论】：

能否添加相关的html代码？

标签： jquery html scroll slide

【解决方案1】：

if(floater.position().bottom <= footer.height()) {
    return false
} else{
    //your fading
}

这未经测试..只是一个想法..

【讨论】：

【解决方案2】：

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

只需比较窗口高度和浮动 div 并设置停止滚动的条件。这帮助了我一次。！

【讨论】：

【解决方案3】：

这是一个插件：fixedIfNeeded.js on Google Code

$('#element-that-should-float').fixedIfNeeded('#element-to-stop-before');

如果您不想使用它，也许代码可以提供帮助。

使用示例：http://sleekphp.com/docs/（注意它是如何在 cmets 部分之前停止的）。

【讨论】：