Microsoft Edge의 스크롤에 끈적한 헤더가 있습니다.

Question

페이지로드시 화면에서 벗어나지 만 사용자가 페이지를 아래로 스크롤하면 일반 스크롤과 같이 요소가 위로 이동합니다.

일단이 요소가 페이지 상단에 도달하면 나머지 부분은 아래로 스크롤하기위한 머리글이되고 싶습니다.

Microsoft Edge를 제외한 모든 브라우저에서이 기능을 사용할 수 있습니다. Edge에서 성공하지 못한 채 아래 코드 조각을 시도했습니다. 또한 스크롤 거리를 px의 설정 수로 설정하려고 시도했지만 브라우저와 장치의 높이가 다양하기 때문에 작동하지 않았습니다.

나는 지금 무엇인가 파악하고 있습니다. 시도 할 수있는 가능한 해결책이 있습니까? 마할로!

$(window).scroll(function() { 
if ($(window).scrollTop() > $(window).height()) { 
    $('#systemSticky').removeClass('sticky'); 
} else { 
    $('#systemSticky').addClass('sticky'); 
} 
}); 

- 그리고이 ---

var stickyOffset = $('#systemSticky').offset().top; 

$(window).scroll(function(){ 
var sticky = $('#systemSticky'), 
    scroll = $(window).scrollTop(); 

if (scroll >= stickyOffset) sticky.addClass('fixed'); 
else sticky.removeClass('fixed'); 
}); 

---이 ---

$(document).scroll(function() { 
var scrollDistance = $(document).scrollTop(); 
var stickyMenu = $("#systemSticky"); 
if(stickyMenu.offset().top == 0) { 
    stickyMenu.addClass({ 
     "position": "fixed", 
     "top" : "0", 
     "width" : "100%" 
    }); 
} else { 
    stickyMenu.css("position", "relative"); 
} 
}); 

---이 ---

var header = $("#systemSticky"); 
$(window).scroll(function() { 
var scroll = window.scrollTop(); 
if (scroll = 100vh) { 
    header.addClass("position: fixed"); 
} else { 
    header.removeClass("position: fixed"); 
} 
}); 

Answer 1

다음과 같이 시도하십시오.

이 HTML에

function sticky_relocate() { 
var window_top = $(window).scrollTop(); 
var div_top = $('#sticky-anchor').offset().top; 
if (window_top > div_top) { 
    $('#sticky').addClass('stick'); 
    $('#sticky-anchor').height($('#sticky').outerHeight()); 
} else { 
    $('#sticky').removeClass('stick'); 
    $('#sticky-anchor').height(0); 
} 
} 

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

:

<div id="sticky-anchor"></div> 
<div id="sticky">This will stay at top of page</div> 

그리고 당신의 CSS에 이것을 추가 :

#sticky { 
    padding: 0.5ex; 
    width: 600px; 
    background-color: #333; 
    color: #fff; 
    font-size: 2em; 
    border-radius: 0.5ex; 
} 

#sticky.stick { 
    margin-top: 0 !important; 
    position: fixed; 
    top: 0; 
    z-index: 10000; 
    border-radius: 0 0 0.5em 0.5em; 
} 

은 if 문은 이미 기존 클래스에 새 클래스를 적용 사실이다. div가 창 상단 (이 경우)에 도달하면 원하는 모든 스타일을 조정할 수 있습니다.

자세한 내용은 post을 방문하십시오. fiddle