Question

两个问题：

“获取抢先体验”栏的重点。它的位置是：relative，一旦移到第二部分，我想让它保持粘性。我尝试添加具有相同高度的辅助程序，以在将.class更改为fixed时获得平滑过渡。但是没有用。以前网站中的帮助程序对我有帮助，但现在它不起作用，确实让我感到困扰。
在所有浏览器中都可以代替位置固定的方法吗？在这种情况下，jquery的外观如何？

谢谢。

/**
 * Zirelco
 * Custom JS functions
 */

jQuery(document).ready(function ( $ ) {
var  mn = $("#sticky-wrapper");
mns = "nav--scrolled";
hdr = $("#top-wrapper-v1").height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }

});


$('.cookies .btn').on('click', function() {
    if ($('.cookies').css('opacity') == 0) {
        $('.cookies').css('opacity', 1);
    }
    else {
        $('.cookies').addClass('none');
    }
});

});

Answer 1

编辑V3

尝试使用此代码代替您的代码：

(function(selector) {

    selector = selector  || '#sticky-wrapper';
    var stickyWrapper = document.querySelector(selector)
    var stickyTrigger = document.createElement('div')
    stickyTrigger.classList.add('sticky-trigger')
    stickyWrapper.parentElement.insertBefore(stickyTrigger, stickyWrapper)

    var listener = function (e) {
        if (stickyTrigger.getBoundingClientRect().top < 0) {
            stickyWrapper.classList.add('sticky');
        } else {
            stickyWrapper.classList.remove('sticky');
        }
    }

    var onScroll = document.addEventListener('scroll', listener);

}('#sticky-wrapper'))

这是什么：

创建一个.sticky-trigger元素
在#sticky-wrapper前插入此权限
监视文档的scroll事件
检查top元素getBoundingClientRect的.sticky-trigger属性
根据该sticky值的正负号切换#sticky-wrapper的{{1}}类

您根本不需要更改HTML输出

旧版V1

您将top #top-wrapper-v1的高度用作类切换的触发器。但是您完全忘记了还要计算<section>高度。为防止此类错误，只需将“＃sticky-wrapper”的顶部边缘作为触发器

<header>

旧版V2

由于询问者的评论，这是一种改进的方法。在前面的示例中，// $(window).scroll(function(e) { // if( $(this).scrollTop() > mn.offset().top ) { // mn.addClass('sticky'); // } else { // mn.removeClass('sticky'); // } //});的{{1}}的度量被立即设置为offset().top引起的#sticky-wrapper。为了解决此问题，我们将0包裹在一个trigger元素中，将 that 元素的position: fixed作为触发器。该触发元素将保留在文档流中，而不是#sticky-wrapper HTML

offset().top

JavaScript

fixed

如何防止硬跳，还有什么替代姿势：粘性？

1 个答案:

编辑V3

旧版V1

旧版V2