У меня есть расположение в 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);
});
Надеюсь, я правильно понял, когда нижняя часть боковой панели входит в представление, а затем придерживаться?
Я создал еще один div внизу боковой панели (внутри боковой панели). Когда это появляется в виду, оно прилипает.
<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);
});
Я надеюсь, что это помогает.
Что-то вроде:
if (sidebar.top + sidebar.height < window.scrolltop + window.height) {
// set sticky
}
и установите липкие потребности, чтобы учесть, что боковая панель может быть выше, чем область просмотра, поэтому:
sidebar.top = sidebar.height - window.height // this will be a negative number