Липкая боковая панель, которая прилипает только тогда, когда нижняя часть боковой панели находится в нижней части окна

0

У меня есть расположение в 2 столбцах. Левый столбец длиннее боковой панели. Я хочу, чтобы боковая панель была прикреплена, когда ее дно доходит до нижней части окна браузера. Таким образом, пользователь может продолжать прокручивать содержимое левого столбца, пока правая панель боковых панелей. Я видел здесь много липких вопросов, однако эта конкретная ситуация все еще меня претит. У меня также есть заголовок заголовка в левом столбце, который я успешно получил.

Вот демонстрация того, что я сделал в jsfiddle !

и здесь быстрый взгляд на js, я пытаюсь.

    $(function(){
       var headlineBarPos = $('.headlineBar').offset().top; // returns number
       var sidebarHeight = $('.sticky-sidebar-wrap').height();
       var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
       var windowHeight = $(window).height();

       var totalHeight = sidebarHeight + sidebarTop;

    $(window).scroll(function(){ // scroll event 

          var windowTop = $(window).scrollTop(); // returns number

          // fixing the headline bar    
          if (headlineBarPos < windowTop) {
              $('.headlineBar').addClass('sticky').css('top', '0');
          }
          else {
              $('.headlineBar').removeClass('sticky').removeAttr('style');
          }

        if(sidebarHeight < windowTop) {
            $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
        } else {
           $('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');
        }

        console.log(windowTop);

    });


    console.log(headlineBarPos);
    console.log(sidebarHeight);
    console.log(sidebarTop);

    });
Теги:
sticky

2 ответа

1
Лучший ответ

Надеюсь, я правильно понял, когда нижняя часть боковой панели входит в представление, а затем придерживаться?

Я создал еще один div внизу боковой панели (внутри боковой панели). Когда это появляется в виду, оно прилипает.

http://jsfiddle.net/Z9RJW/10/

<div class="moduleController"></div> //inside the sidebar

и в js

$(function () {


var headlineBarPos = $('.headlineBar').offset().top; // returns number
var moduleControllerPos = $('.moduleController').offset().top; // returns number    
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();

var totalHeight = sidebarHeight + sidebarTop;

$(window).scroll(function () { // scroll event 

    var windowTop = $(window).scrollTop(); // returns number

    // fixing the headline bar    
    if (headlineBarPos < windowTop) {
        $('.headlineBar').addClass('sticky').css('top', '0');
    } else {
        $('.headlineBar').removeClass('sticky').removeAttr('style');
    }

    if (moduleControllerPos < windowTop + windowHeight) {
        $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
    } else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');        }






    console.log(windowTop);

});


console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);

});

Я надеюсь, что это помогает.

  • 1
    Очень полезно на самом деле. Я сделал одну небольшую настройку для вашего решения, чтобы получить поведение, которое я ищу - смотрите здесь
0

Что-то вроде:

if (sidebar.top + sidebar.height < window.scrolltop + window.height) {
    // set sticky
}

и установите липкие потребности, чтобы учесть, что боковая панель может быть выше, чем область просмотра, поэтому:

sidebar.top = sidebar.height - window.height // this will be a negative number

Ещё вопросы

Сообщество Overcoder
Наверх
Меню