Question

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

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

Answer 1

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

这不是测试..只是一个想法..

Answer 2

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

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

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

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

Answer 3

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

只需比较窗口高度和浮动div，然后放置条件即可停止滚动。这帮了我一次。！

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

3 个答案: