|
Помогите использовать функцию onscroll
Есть кнопка открытия модального окна ближе к низу страницы.
При закрытии модального окна происходит скролл наверх страницы. Необходимо чтобы при закрытии модального окна не скролило наверх страницы, а контент оставался в текущем положении. Сделал вот так:
var scl = $(window).scrollTop();
var scrtop = "-"+scl+"px";
//открытие модального окна
$(document).on("shown.bs.modal", ".modal", function () {
// Когда модальное окно открыто, фиксируем элемент body
$("body").css("position","fixed").css("top", scrtop);
});
// закрытие модального окна
$(document).on("hidden.bs.modal", ".modal", function () {
// Когда модальное окно скрыто...
$("body").removeAttr("style").removeAttr("class");
$(window).scrollTop(scl);
});
НО работает только если прокрутить до кнопки вниз и обновить страницу. Динамически определить скролл не хватает знаний. Конечно есть функция, которая динамически определяет скрол, но как ее прикрутить к вышеуказанному коду или как-то сделать по другому, ума не приложу. Вот эта функция:
$(window).on("scroll", function() {
$(window).scrollTop();
});
Заранее, благодарю! |
Вместо $("body").css("position","fixed").css("top", scrtop);
$("html").css("overflow","hidden"); и $("html").css("overflow","auto"); соответственно. А фиксировать окно. |
Цитата:
|
laimas,
Сделал как сказал
//открытие модального окна
$(document).on("shown.bs.modal", ".modal", function () {
$("html").css("overflow","hidden");
});
// закрытие модального окна
$(document).on("hidden.bs.modal", ".modal", function () {
$("html").css("overflow","auto");
});
Но это не помогает, при открытии страница на месте, а при закрытии окна все равно скролится в самый верх. |
Кто скролится, окно? Если оно вызывается в любом месте страницы, то оно фиксируется либо к верхнему краю, либо по центру вертикали. А overflow hidden/auto, это запрет скролла документа, чтобы после закрытия окна была прежняя позиция.
|
Цитата:
|
Да какая разница как оно закрывается, кнопкой, щелчком вне его, ESC ...
|
Цитата:
|
Цитата:
Подскажите еще, как сделать чтобы контент элементы не сдвигались вправо когда пропадает скролл? |
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
margin: 0;
}
.overlap {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #00000055;
z-index: 100;
}
.modal {
position: fixed;
width: 400px;
height: 200px;
top: -200px;
left: 50%;
margin-left: -200px;
background-color: #fff;
border-radius: 0 0 10px 10px;
}
</style>
<script type="text/javascript">
$(function() {
for(var i=1; i < 80; ++i) $('body').append('<p>'+i+'</p>');
$('html').animate({
scrollTop: 1000
}, 500, function() {
$("html").css("overflow","hidden");
$('<div class="overlap"><div class="modal"><button>Close</button></div></div>')
.appendTo('body')
.find('.modal')
.animate({top: 0}, 500)
.find('button').click(function() {
$(this).parent().animate({top: -200}, 500, function() {
$("html").css("overflow","auto");
$(this).parent().remove()
})
})
});
});
</script>
</head>
<body>
</body>
</html>
На месте же документ остается? Overflow для html потому, что среди плагинов sticky есть один (какой именно теперь не помню), который отказывается работать после разрешения прокрутки если overflow определять для body. Цитата:
|
| Часовой пояс GMT +3, время: 10:51. |
|