Javascript - Сделать div следовать за страницей (работает, но она также выдвигает боковую панель?) - PullRequest
Новая
       5

Javascript - Сделать div следовать за страницей (работает, но она также выдвигает боковую панель?)

0 голосов
/ 08 сентября 2011

/ ----------------------------------------------------------------------------------- / РЕДАКТИРОВАТЬ: Я НЕ хочуиспользовать фиксированное позиционирование CSS.Он находится в нижней части окна просмотра без прокрутки, однако я хочу, чтобы он следовал, когда добирался до вершины./ ----------------------------------------------------------------------------------- /

Ясоздание сжатой страницы с массивной боковой панелью.Там множество отзывов, фактов, картинок и прочего.Тем не менее, у меня есть кнопка вверху страницы, и я хочу следить за пользователями вниз по странице, когда они прокручиваются.Не должно быть слишком сложно, верно?

У меня есть этот скрипт, который начинает перетаскивать .followme, когда он попадает в верхнюю часть страницы.Тем не менее - это также оттеснило все дивы под ним.Могу ли я сказать, чтобы он был нацелен на JUST .follow и не влиял на div ниже него? 

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $(".followme").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $(".followme").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 100);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $(".followme").stop().animate({
                marginTop: newPosition
            });
        } else {
            $(".followme").stop().animate({
                marginTop: 0
            });
        };
    });
});

1 Ответ

1 голос
/ 08 сентября 2011

У вас есть более простая опция, которая вообще не требует JS \ jQuery.

.followme {
    position: fixed;
    height: 30px;
    width: 30px;
    background-color: #FF0000;
    top: 48%;
    left: 0;
}

Это никогда не повлияет на другие элементы страницы и не требует никаких сценариев вообще.Теперь, если вам нужен элемент (followme), например, для показа на определенном свитке% или любой другой интерактивности, о которой вы можете подумать, тогда вам нужно будет мыслить более творчески.Но если проблема состоит только в том, чтобы элемент следовал за вашей прокруткой, то вышеупомянутое должно быть хорошим и чистым решением.

Пример кода:

http://jsfiddle.net/bhpgC/

...