Microsoft Edgeのスクロールのスティッキーヘッダー

Question

ページの読み込みが画面から外れるが、ユーザーがページをスクロールすると、要素が通常のスクロールのように上に移動します。

この要素がページの一番上に到達すると、一番上にスクロールしてページの残りの部分をスクロールするようにします。

私はこれをMicrosoft Edge以外のすべてのブラウザで使用できます。 Edgeで成功せずに以下のコードを試してみました。私はまた、スクロール距離をpxの設定数に設定しようとしましたが、ブラウザやデバイスの高さが異なるために動作しませんでした。

私は今何かを掴んでいますが、私は誰でも試すことができる解決策がありますか？マハロ！

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

--andこの---

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"); 
} 
}); 

---この---

Answer 1

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

このようなものを試す：

この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