Использование jQuery / JavaScript для перемещения элемента вправо
Привет,
Я нашел липкий скрипт jQuery для боковой панели, но фиксированный элемент (боковая панель) перемещается влево, когда я начинаю прокручивать вниз. Я все время стараюсь держать его справа. Кроме того, я пытаюсь получить некоторый интервал вокруг боковой панели, когда она начинает прокручиваться, так как теперь она просто прилипает к самому верху.
Я верю, что это простое исправление, но JavaScript для меня похож на темный лес, я пытался изменить пару вещей, пытался искать в Интернете, но не могу найти ответы, или я просто не знаю, как их искать, поэтому я извиняюсь, если об этом спрашивали раньше.
$( document ).ready(function() {
console.info( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "container">
<div class = "header">
This is header
</div>
<div class = "sidebar sticky">
This is side bar
</div>
<div class = "content">
This is main content
</div>
<div class = "footer">
<div class = "sticky-stopper"></div>
This is my footer
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я использовал плагин Sticky-Kit.js. Это сработало для меня. Смотрите ниже, он держит вашу боковую панель все время вправо и имеет эффект липкий, который вам нужен:
$(document).ready(function() {
console.info("document ready!");
$(".sidebar").stick_in_parent();
});.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class = "container">
<div class = "header">
This is header
</div>
<div class = "sidebar sticky">
This is side bar
</div>
<div class = "content">
This is main content
</div>
<div class = "footer">
<div class = "sticky-stopper"></div>
This is my footer
</div>
</div>Вы можете использовать метод JQuery css () для применения css при прокрутке к элементу для достижения желаемого эффекта.
Измените JavaScript следующим образом:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
Свойство css right:0px применяется к элементу при прокрутке, так как его позиция становится aboslute при прокрутке.
margin: 10px 10px 0px 0px был также применен к элементу, чтобы обеспечить дополнительное пространство вокруг него при прокрутке. Затем он отправляется на margin:0px, когда прокрутка останавливается.
Вам также нужно будет настроить css класса css content, если вы не хотите, чтобы ваша боковая панель располагалась поверх области содержимого.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Здесь - это обновленная рабочий пример, демонстрирующая эти изменения.
Большое спасибо. Однако боковая панель перемещается с помощью горизонтальной прокрутки. Можно ли сделать так, чтобы он перемещался рядом с полем содержимого, не перемещаясь по горизонтали?
@Oful, я не уверен, что понимаю, что вы имеете в виду, когда боковую панель перемещают рядом с полем содержимого при горизонтальной прокрутке. Оно уже рядом с полем содержимого ??
Это не заканчивается нижним колонтитулом? Как это изменить?