Добавление класса к id При прокрутке страницы вниз
Здравствуйте, помогите пожалуйста реализовать задачу.
Имеется div с id "fixed-top". В стилях для #fixed-top прописан position:fixed; display:none. Нужно, чтобы при прокрутке страницы вниз на 300 пикселей - к блоку добавился стиль "display:block!important". Для этого в css я добавил новый стиль ".display{display:block!important}". Итого: Нужно, чтобы при прокрутке вниз на 300 пикселей, к id "fixed-top" добавлялся стиль .display. Надеюсь обьяснил понятно :) Заранее спасибо. |
Попытался сделать с помощью данного лода, но не сработало:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if (document.body.scrollTop >= 300) {
$("#fixed-top").css({
'display':'block!important'
});
};
});
});
</script>
|
NightFoxy,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
#fixed-top {
position: fixed;
display: none;
top: 100px;
font-size: 3em;
}
.block {
display: block !important;
}
html, body {
height: 2000px;
}
</style>
</head>
<body>
<div id="fixed-top">Bla-bla</div>
<script>
window.onscroll = function() {
var fixedTop = document.getElementById('fixed-top');
if (window.pageYOffset > 300) {
fixedTop.classList.add('block');
} else {
fixedTop.classList.remove('block');
}
};
</script>
</body>
</html>
|
Оказалось, что я забыл подключить библиотеку jquery к сайту :)
Спасибо Decode за решение, но я воспользовался другим кодом
$(document).ready(function(){
$("#fixed-top").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$("#fixed-top").addClass("класс,который нужно добавить");
} else {
$('#fixed-top').removeClass("класс,который нужно добавить");
}
});
});
});
|
| Часовой пояс GMT +3, время: 21:05. |