Как спрятать DIV?

Question

[Андрей Борчик]

Как спрятать DIV при скролле ?
Есть вот такой код:

<script type="text/javascript">
	{literal}	
	$(window).scroll(function(){
		$(".div-fade-main").css("opacity", 1 - $(window).scrollTop() / 250);
	  });	
	{/literal}
</script>

Но он делает прозрачным. При этом объект DIV остается кликабельным.
Как после opacity:0 сделать display:none?
пример на сайте: arthata.by
Внизу слева желтый блок

Answer 1

[Сергей Горячев]

<script type="text/javascript">
  {literal}	
  $(window).scroll(function(){
    $(".div-fade-main").animate("opacity", 1 - $(window).scrollTop() / 250).delay(250).hide(250);
    });	
  {/literal}
</script>

Comments

[Андрей Борчик]

да, но когда я возвращаюсь вверх экрана - div не появляется снова

[Сергей Горячев]

Андрей Борчик: Честно говоря, проще использовать toggleClass для этой цели.

[Андрей Борчик]

Sergey Goryachev: а как сделать toggleclass когда opacity будет равно нулю

[Сергей Горячев]

Андрей Борчик: А смысл? Классу даете opacity и он итак будет 0.

Answer 2

[Максим Тимофеев]

Не используйте анимацию в js. В js используйте toggleClass а в css пропишите анимацию.

Answer 3

[k0nsu1]

$(".div-fade-main").hide()

Comments

[k0nsu1]

или же $(".div-fade-main").toggle();

[Андрей Борчик]

k0nsu1: это будет резкое исчезновение? правильно? а нужно именно затухание при скролле.... то есть оставить эту функцию, но при полном opacity 0 - прятать

[k0nsu1]

$(".div-fade-main").hide('slow')

Answer 4

[functyon]

document.querySelector(".div-fade-main").style.display = "none"

Answer 5

[Антон Антон]

если прозрачность меняется анимацией, то https://developer.mozilla.org/ru/docs/Web/Events/t... , если просто устанавливается прозрачность, то _вместо_ нее делать hide