Question

Requirement :当用户使用jQuery向下滚动时，我想减少标题的高度。

我使用Javascript实现了同样的目标。

以下是Javascript代码：Fiddle

function init() {
    window.addEventListener('scroll', function (e) {
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300,
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header, "smaller");
        } else {
            if (classie.has(header, "smaller")) {
                classie.remove(header, "smaller");
            }
        }
    });
}
window.onload = init();

Answer 1

$(function () {
  $(window).scroll(function () {
     var distanceY = $(this).scrollTop(),
         shrinkOn  = 300,
         header    = $("header");

    if (distanceY > shrinkOn) {
      header.addClass("smaller");
    } else {
      if (header.hasClass("smaller")) {
        header.removeClass("smaller");
      }
    }
  });  
})

Example

Answer 2

检查出来

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script>
  $(document).ready(function(){
    $(window).scroll(function(){
        var distanceY = window.pageYOffset;
        var shrinkOn = 300;
        if (distanceY > shrinkOn) {
                 $('header').addClass('smaller');
        } else {
            if ( $('header').hasClass('smaller')) {
                 $('header').removeClass('smaller');
            }
        }
    });
  });
</script>

向下滚动减少标题的高度 - jQuery

2 个答案: