Исчезающий элемент на Прокрутке

Question

Мне любопытно, как я могу создать DIV (или что-нибудь еще на самом деле), что я могу исчезать (или изменять непрозрачность), когда пользователь прокручивает страницу вниз.Этот DIV будет располагаться в верхней части страницы, но будет четко виден только тогда, когда находится в самом верху страницы.

Кроме того, было бы идеально, если бы я мог вернуть этот элемент в режим onmouseover, независимо от текущей позиции прокрутки на странице.

Answer 1

jQuery - jQuery - запрос это позволило бы получить краткое решение, скрыв при этом большинство несоответствий в браузере.Вот краткий макет, который поможет вам начать:

<script type="text/javascript">

    //when the DOM has loaded
    $(document).ready(function() {

        //attach some code to the scroll event of the window object
        //or whatever element(s) see http://docs.jquery.com/Selectors
        $(window).scroll(function () {
              var height = $('body').height();
              var scrollTop = $('body').scrollTop();
              var opacity = 1;

              // do some math here, by placing some condition or formula
              if(scrollTop > 400) {
                  opacity = 0.5;
              }

              //set the opacity of div id="someDivId"
              $('#someDivId').css('opacity', opacity);
        });
    });
</script>

Смотрите также:

• jQuery - jQuery - запрос
• Селекторы
• CSS - файл
• События /Прокрутка
• CSS/scrollTop /Прокрутка
• CSS/scrollLeft Левый

Answer 2

Я подумал, что попробую использовать фактическое значение scrollTop для определения уровня непрозрачности, таким образом получая плавное затухание.Я также добавил состояние наведения для второй части. Благодаря Дэвиду за то, что усовершенствовал математику для меня.

//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
  var height = $("body").height();
  var scrollTop = $("body").scrollTop();
  var opacity = 1;

  if(scrollTop < 41)
    {opacity = 1-Math.floor(scrollTop)/100;}
    else
    {opacity = 0.6;}

  $("#header").css("opacity", opacity);
  $("#header").hover(function(){
    $(this).css("opacity", 1);
    },function(){
    $(this).css("opacity", 0.6);
    });
});

Answer 3

Используйте событие прокрутки и проанализируйте значение document.documentElement.scrollTop, чтобы установить соответствующую непрозрачность.http://www.quirksmode.org/dom/events/scroll.html