플로팅 메뉴, 스크롤하는 동안 점프

Question

맨 위의 플로팅 메뉴가 스크롤을 시작하는 동안 약간 점프합니다. 항상 맨 위에 고정되도록하는 방법?

전체 페이지 건너 뛰기/깜박임을 스크롤 할 때 어두운 회색 바닥 글 만 화면 아래에 있거나 브라우저 창의 크기가 조정 된 경우 일부 페이지에서.

function relocate_persistent_header() { 
    var header_bar = jQuery("#menu-wrapper"); 
    if(header_bar.hasClass("floater-bar")) { 
     header_bar.css("left", ((jQuery(window).width()/2) - header_bar.width()/2) + "px"); 
    }else{ 
     header_bar.css("left", ""); 
    } 
} 

jQuery(document).ready(function($) 
{ 
    var $header_top_pos = $("#menu-wrapper").offset().top + 20; 
    function ozy_check_floating_position() { 
     if ($(window).scrollTop() > $header_top_pos) { 
      $("#menu-wrapper").addClass("floater-bar"); 
     } else { 
      $("#menu-wrapper").removeClass("floater-bar"); 
     } 
     relocate_persistent_header(); 
    } 
    $(window).scroll(function() { ozy_check_floating_position(); }); 

    ozy_check_floating_position(); 
}); 

jQuery(window).resize(function() 
{ 
    relocate_persistent_header(); 
}); 

이이 문제의 원인 :

my website

이 페이지 소스의 맨 아래에 :)

Answer 1

도와주세요 다음 코드를 사용하여 자바 스크립트 부분입니다. menu-wrapper은 항상 CSS 클래스 floater-bar을 더 쉽게 추가하고 제거하는 것이 더 쉽습니다.

이 방화범을 사용하여 내가 menu-wrapper의 스타일 floater-bar과 관련된 모든 CSS 속성했다 (그래서 floater-bar를 제거하는 효과가 없습니다 것)하고 "점프"문제가 해결되었다. 웹 사이트에서

if ($(window).scrollTop() > $header_top_pos) { 
    $("#menu-wrapper").addClass("floater-bar"); 
} else { 
    $("#menu-wrapper").removeClass("floater-bar"); 
} 

을 실제 HTML에 menu-wrapper에 클래스 floater-bar를 추가 : 실제로이 솔루션을 사용하려면, 제거합니다.