jQuery - 아래로 스크롤할 때 축소되는 sticky 헤더

jQuery - 아래로 스크롤할 때 축소되는 sticky 헤더

페이지를 아래로 스크롤할 때 (애니메이션으로) 끈적거리는 머리말 축소를 만드는 방법이 궁금합니다. 그리고 페이지를 위쪽으로 스크롤할 때 정상 상태로 돌아갑니다.다음은 두 가지 예입니다.

http://themenectar.com/demo/salient/

http://www.kriesi.at/themes/enfold/

수정할 부분이 있는데 사용자가 아래로 스크롤할 때 헤더를 축소하려면 어떻게 해야 합니까?

감사합니다.

이것은 jQuery를 사용하여 찾고 있는 것이어야 합니다.

$(function(){
  $('#header_nav').data('size','big');
});

$(window).scroll(function(){
  if($(document).scrollTop() > 0)
{
    if($('#header_nav').data('size') == 'big')
    {
        $('#header_nav').data('size','small');
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    }
}
else
  {
    if($('#header_nav').data('size') == 'small')
      {
        $('#header_nav').data('size','big');
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
      }  
  }
});

데모: http://jsfiddle.net/jezzipin/JJ8Jc/

여기 jezzipin's Solution의 CSS 애니메이션 포크를 사용하여 스타일링과 코드를 분리합니다.

JS:

$(window).on("scroll touchmove", function () {
  $('#header_nav').toggleClass('tiny', $(document).scrollTop() > 0);
});

CSS:

.header {
  width:100%;
  height:100px;
  background: #26b;
  color: #fff;
  position:fixed;
  top:0;
  left:0;
  transition: height 500ms, background 500ms;
}
.header.tiny {
  height:40px;
  background: #aaa;
}

http://jsfiddle.net/sinky/S8Fnq/

스크롤/터치 이동 시 CSS 클래스 "작은"은 "$(문서)"인 경우 "#header_nav"로 설정됩니다.scrollTop()"이 0보다 큽니다.

CSS 전이 속성은 "높이"와 "배경" 속성을 잘 애니메이션화합니다.

http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/

이 링크에는 헤더 자체뿐만 아니라 헤더 내의 요소를 더 작게 만드는 방법을 보여주는 소스 코드가 포함된 훌륭한 튜토리얼이 있습니다.

트위터 스크롤 문제(http://ejohn.org/blog/learning-from-twitter/) 를 기반으로 합니다.

js 스크롤 이벤트를 조절하는 내 해결책은 다음과 같습니다(모바일 기기에 유용함).

JS:

$(function() {
    var $document, didScroll, offset;
    offset = $('.menu').position().top;
    $document = $(document);
    didScroll = false;
    $(window).on('scroll touchmove', function() {
      return didScroll = true;
    });
    return setInterval(function() {
      if (didScroll) {
        $('.menu').toggleClass('fixed', $document.scrollTop() > offset);
        return didScroll = false;
      }
    }, 250);
  });

CSS:

.menu {
  background: pink;
  top: 5px;
}

.fixed {
  width: 100%;
  position: fixed;
  top: 0;
}

HTML:

<div class="menu">MENU FIXED ON TOP</div>

http://codepen.io/anon/pen/BgqHw

jezzipin의 답변을 업그레이드 했습니다. (그리고 키 대신 패딩 상의를 애니메이션으로 만들고 있지만 여전히 요점을 이해하고 있습니다.

 /**
 * ResizeHeaderOnScroll
 *
 * @constructor
 */
var ResizeHeaderOnScroll = function()
{
    this.protocol           = window.location.protocol;
    this.domain             = window.location.host;
};

ResizeHeaderOnScroll.prototype.init    = function()
{
    if($(document).scrollTop() > 0)
    {
        $('header').data('size','big');
    } else {
        $('header').data('size','small');
    }

    ResizeHeaderOnScroll.prototype.checkScrolling();

    $(window).scroll(function(){
        ResizeHeaderOnScroll.prototype.checkScrolling();
    });
};

ResizeHeaderOnScroll.prototype.checkScrolling    = function()
{
    if($(document).scrollTop() > 0)
    {
        if($('header').data('size') == 'big')
        {
            $('header').data('size','small');
            $('header').stop().animate({
                paddingTop:'1em',
                paddingBottom:'1em'
            },200);
        }
    }
    else
      {
        if($('header').data('size') == 'small')
        {
            $('header').data('size','big');
            $('header').stop().animate({
                paddingTop:'3em'
            },200);
        }  
      }
}

$(document).ready(function(){
    var resizeHeaderOnScroll = new ResizeHeaderOnScroll();
    resizeHeaderOnScroll.init()
})

Jezzipin의 답변을 받아서 페이지를 새로고침할 때 스크롤이 되면 정확한 사이즈가 적용되도록 만들었습니다.그리고 꼭 필요하지 않은 것들도 없앴습니다.

function sizer() {
    if($(document).scrollTop() > 0) {
        $('#header_nav').stop().animate({
            height:'40px'
        },600);
    } else {
        $('#header_nav').stop().animate({
            height:'100px'
        },600);
    }
}

$(window).scroll(function(){
    sizer();
});

sizer();

언급URL : https://stackoverflow.com/questions/16442016/jquery-sticky-header-that-shrinks-when-scrolling-down