Форум

NightFoxy · #1 (**permalink**) 16.07.2016, 22:12

Здравствуйте, помогите пожалуйста реализовать задачу.
Имеется div с id "fixed-top". В стилях для #fixed-top прописан position:fixed; display:none. Нужно, чтобы при прокрутке страницы вниз на 300 пикселей - к блоку добавился стиль "display:block!important".

Для этого в css я добавил новый стиль ".display{display:block!important}".

Итого: Нужно, чтобы при прокрутке вниз на 300 пикселей, к id "fixed-top" добавлялся стиль .display. Надеюсь обьяснил понятно

Заранее спасибо.

NightFoxy · #2 (**permalink**) 16.07.2016, 22:29

Попытался сделать с помощью данного лода, но не сработало:

<script type="text/javascript">
		$(document).ready(function(){
  $(window).scroll(function(){
    if (document.body.scrollTop >= 300) {
      $("#fixed-top").css({
        'display':'block!important'
      });
    };
  });
});

</script>

Decode · #3 (**permalink**) 16.07.2016, 22:36

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>

NightFoxy · #4 (**permalink**) 16.07.2016, 23:35

Оказалось, что я забыл подключить библиотеку jquery к сайту

Спасибо Decode за решение, но я воспользовался другим кодом

$(document).ready(function(){
	$("#fixed-top").hide();
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$("#fixed-top").addClass("класс,который нужно добавить");
			} else {
				$('#fixed-top').removeClass("класс,который нужно добавить");
			}
		});
	});
});

Форум

Справочник

Discord чат

Курсы javascript