Переделать скрипт с article и aside
Приветствую!
Мне нужно переделать скрипт. Могу заплатить 300 руб., если кто возьмется. Для чего мне нужно? У меня на странице есть скрытое меню, которое находится в середине страницы. Скрыто меню с помощью размещения в теге div атрибута style="display: none;". <div class="detail-fixed-tab" style="display: none;"> здесь меню </div> У меня такая задача: нужно используя скрипт, при прокручивании скрола страницы, при достижении скрытого меню верхней части окна браузера - менять display: none; на display: block;. Если скролить потом вверх, то возвращать обратно предыдущее значение display: none;. В скрипте используется два ID: id="article" id="aside1" article - это внешний div, как бы контейнер, внутри которого перемещается второй div с id aside1. Такая конструкция подходит для моей задачи. И ещё нужно добавить возможность отступа срабатывания скрипта, при достижении div c id=aside1 на 50px вниз, позже. Имею ввиду, что когда при прокрутке будет достигнут div c id=aside1, нужно ещё вниз прокрутить 50px, тогда скрипт поменяет display: none; на display: block;. И аналогично, когда находясь в нижней части страницы и скролят вверх, то когда при прокрутке будет достигнуто 50px до div c id=aside1, тогда скрипт поменяет display: block; на display: none;. Ну я сам то понял, что объяснил. Надеюсь и вы поймете. Я подключил этот скрипт такой конструкцией: <div id="article"> <div id="aside1"> <div class="detail-fixed-tab"> здесь меню </div> </div> </div> Скрипт работает, видит при скроле скрытое меню и добавляет ещё один div, в который пихает стили, целую кучу. Нужно все стили повырезать и оставить только то, что я описал выше, один стиль. Скрипт ещё добавляет класс sticky. Его тоже вырезать. Демо именно этого скрипта здесь http://sticky01.blogspot.com/2013/09/5.html Код взял здесь http://www.002020.ru/2013/09/scroll-...?commentPage=2 Номер 5
(function(){
var a = document.querySelector('#aside1'), b = null, P = 0;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('#article').getBoundingClientRect().bottom); // селектор блока, при достижении нижнего края которого нужно открепить прилипающий элемент
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = - R +'px';
} else {
b.className = 'sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
})()
<style>
.sticky {
position: fixed;
z-index: 101;
}
.stop {
position: relative;
z-index: 101;
}
</style>
|
Решено. Рони сделал.
|
| Часовой пояс GMT +3, время: 19:21. |