Как остановить плавающий div jQuery от скольжения ниже нижнего колонтитула? - PullRequest
Новая
       28

Как остановить плавающий div jQuery от скольжения ниже нижнего колонтитула?

1 голос
/ 23 декабря 2011

Я использую следующий код для реализации скользящей правой боковой панели, которая скользит вниз по странице при прокрутке вниз и следует за страницей вверх при прокрутке вверх. 

$(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-боковая панель /

Вот пример моей структуры 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>

Ответы [ 3 ]

0 голосов
/ 23 декабря 2011

Вот плагин, который делает это: fixedIfNeeded.js в Google Code 

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

Если вы не хотите его использовать, возможно, код поможет.

Пример его использования: http://sleekphp.com/docs/ (обратите внимание, как он останавливается перед разделом комментариев).

0 голосов
/ 23 декабря 2011 
$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

Просто сравните высоту окна и плавающий элемент div и просто поставьте условие, чтобы остановить прокрутку.это помогло мне однажды.!

0 голосов
/ 23 декабря 2011 
if(floater.position().bottom <= footer.height()) {
    return false
} else{
    //your fading
}

ЭТО НЕ ПРОВЕРЕНО .. просто идея ..

...