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

尝试这样的事情：

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

在这个HTML上：

<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语句为true时，它将新类应用于现有类。因此，当div到达窗口顶部时（在这种情况下），您可以调整所需的每种样式。

如需进一步说明，请访问此post，然后查看此fiddle

Microsoft Edge中滚动时粘滞的标题

1 个答案: