고정 된 div 스테이를 수평으로 고정 시키십시오.

Question

사용자가 스크롤 할 때 div를 화면 상단에 고정시키는 코드입니다.

그러나 브라우저에서 사용자가 왼쪽 또는 오른쪽으로 스크롤하면 막대는 상단에 고정되어 있지만 스크롤됩니다. 내가 끝내는 내용으로 바를 넣고 싶었습니다. 여기

다음은 jfidddle

인 코드 :

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#stickyheader').offset().top; 

    $(window).scroll(function(){ 
      if($(window).scrollTop() > stickyHeaderTop) { 
        $('#stickyheader').css({position: 'fixed', top: '0px'}); 
        $('#stickyalias').css('display', 'block'); 
      } else { 
        $('#stickyheader').css({position: 'static', top: '0px'}); 
        $('#stickyalias').css('display', 'none'); 
      } 
    }); 
}); 

Answer 1

의 핵심 부분은 left:-$(window).scrollLeft()

DEMO

$(function() { 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#stickyheader').offset().top; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > stickyHeaderTop) { 
      $('#stickyheader').css({ 
       position: 'fixed', 
       top: '0px', 
       left: -$(window).scrollLeft() 
      }); 
      $('#stickyalias').css('display', 'block'); 
     } else { 
      $('#stickyheader').css({ 
       position: 'static', 
       top: '0px' 
      }); 
      $('#stickyalias').css('display', 'none'); 
     } 
    }); 
}); 

Answer 2

당신이 왼쪽을 추가하는 시도 유무 : '0 픽셀'는 코드에? 같은 :

는

$(function(){ 
// Check the initial Poistion of the Sticky Header 
var stickyHeaderTop = $('#stickyheader').offset().top; 

$(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
       $('#stickyheader').css({position: 'fixed', top: '0px', left: '0px'}); 
       $('#stickyalias').css('display', 'block'); 
     } else { 
       $('#stickyheader').css({position: 'static', top: '0px', left: '0px'}); 
       $('#stickyalias').css('display', 'none'); 
     } 
}); 
});