Блог

Главная - Вопросы по программированию - Div придерживаться в верхней части страницы при прокрутке и останавливаться на нижнем колонтитуле — jquery

Div придерживаться в верхней части страницы при прокрутке и останавливаться на нижнем колонтитуле — jquery

#jquery #html

#jquery #HTML

Вопрос:

Я нашел этот код http://jsfiddle.net/5ADzD/1 / . Он подходит мне почти идеально. но я хочу, чтобы div остановился в нижнем колонтитуле. Какой код вы должны туда вставить? Спасибо вам за вашу помощь.

 function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) { 
    $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); 
}
else {
    $('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
}

}

 $("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

Комментарии:

1. Что вы подразумеваете под «я хочу, чтобы div остановился в нижнем колонтитуле»??

2. Я хочу, чтобы div #navwrap остановился на нижнем колонтитуле. Проверьте это jsfiddle.net/5ADzD/441

Ответ №1:

я не знаю, зачем вам нужна эта функциональность, но ваша рабочая демонстрация здесь

 if ($(window).scrollTop() == $(document).height() - $(window).height()) {       
             $('#navwrap').css({'position': 'absolute', 'bottom': '0px','top':'auto', 'width': '100%'}); 
}

надеюсь, вы ищете это.

Комментарии:

1. Этот код работает хорошо, но я хочу остановить #navwrap при достижении определенной точки, например #footer

2. я не понимаю, что вам действительно нужно. проверьте это fiddle.jsfiddle.net/Kkv7X


3. Что — то вроде этого codepen.io/jakestuts/full/EzKau , этот пример показывает, что плавающий div останавливается в конце сообщения.

Ответ №2:

Попробуйте это:

 function fixDiv() {
    var $div = $("#navwrap");
    if ($(window).scrollTop() > $div.data("top")) {
        $('#navwrap').css({
            'position': 'fixed',
            'top': '0',
            'width': '100%'
        });
    } if ($(window).scrollTop()   $(window).height() == $(document).height()) {
        $('#navwrap').css({
            'position': 'fixed',
            'bottom': '0',
            'top'   :  'auto',
            'width': '100%'
        });
    }
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);

JSFiddle:
http://jsfiddle.net/Nj4Q8 /

Метки: