滚动一段距离后删除 JavaScript 中的固定位置

Question

我将其位置设置为固定在页面顶部。这将在向下滚动到文档或页面的中间时跟随我。在文件中间之后，我想把它贴在文件中间，没有它就向下滑动。再次向上滚动后，我希望它回来跟随我（固定位置）。

这是我正在处理的一段代码。

            if ($('body').hasClass('catalog-product-view')) {

                if ($(this).scrollTop() >= $('.product-collateral-wrapper').innerHeight()/2)
                {
                    my div should remain in its place now. waiting for me to scoll up again to follow me
                }else{
have my div fixed positioned so when I scroll the page, I always see it. 
}

Here is the full function
        $(window).scroll(function() {
            if ($(this).scrollTop() > offset && !stickyActive) { 
                stickyActive = true;
                $header.addClass("sticky-active");
                $(stickyPlaceholder).show();
                var logo = $('<li></li>').append($('.main-header .logo-container > a').clone()).html();
                logo = '<li class="logo-fixed">'+logo+'</li>';
                $('.main-header nav.top-bar.main-nav .top-bar-section .left').prepend(logo);
                if ($('.top-bar-section .main-logo-sticky').length) {
                    $('.top-bar-section .main-logo').hide();
                }
                topbarLeftHeight = $('.main-header nav.top-bar.main-nav .top-bar-section .left').outerHeight();
            } else if ($(this).scrollTop() < offset && stickyActive) {
                $header.removeClass("sticky-active");
                $('nav.top-bar.main-nav .logo-fixed').remove();
                $(stickyPlaceholder).hide();
                stickyActive = false;
            }
            if ($('body').hasClass('catalog-product-view') && Modernizr.mq('only screen and (min-width: 64.063em)')) {
                setTimeout(function(){
                    $('.magellan-nav.magellan-fixed').css('margin-top',topbarLeftHeight+'px');
                },100);
            }



//HERE GOES CHANGES I AM DOING. It started to make sense how to get it working, but will this be effecient or will it have performance drawback cause of scroll event is triggered with every scroll, and same calculations will be redone again and again?

            if ($('body').hasClass('catalog-product-view')) {



                if ($(this).scrollTop() >= $('.product-collateral-wrapper').innerHeight()/2)
                    {
//will enter code here`l toggle position and top property here based on some calculations
                    }else{
   //will toggle position and top property here based on some calculations
    }
                }





            });
            $(window).scroll();
        };

我尝试将位置从固定更改为相对。这将回到页面顶部，使其在视口中不可见。

Answer 1

听起来你想让元素跟随你到一个点，就好像它撞到了页面下方的一堵看不见的墙？在这种情况下，我建议确定断点（以页面顶部的像素为单位）并将其位置设置为absolute，并使用您计算的top 值。切换定位逻辑 onScroll 和 onResize，还可能会在您使用回调时限制回调。

Answer 2

您在正确的轨道上，但没有代码很难提供可靠的答案。

我最好的尝试是首先让页面与您提到的div 一起工作，该页面位于页面中心，您希望它在中途滚动后如何显示。完成后，使用附加类创建辅助 CSS 设置，以便将其固定在页面顶部：

.div-class {
  // standard css here
}
.div-class.fixed {
  position: fixed;
}

一旦您对这两个版本感到满意，然后使用您的 jquery 脚本来根据窗口位置打开/关闭附加类：您可以很容易地搜索并找到一个好的解决方案。正如林肯所说，您可能希望限制脚本，使其不会在每次滚动事件发生时都运行。

Answer 3

如果您希望它与图像一起使用，您可以在 div 中设置 background-image、background-size（如果您想更改图像的大小）、background-repeat 和 background-attachment 属性.

背景图片
将background-image 设置为您的图片在文件夹中的网址或位置。

后台重复
将background-repeat 设置为no-repeat，这样background-image 就不会在您的div 中重复出现

背景附件
将background-attachment 设置为fixed。它将一直保持原位，直到 div 滚动到末尾。

由于您希望图像在点击页面中间后消失，请将您的 divs height 设置为 50% 并将您的 html 和 body 高度设置为 100%

示例：

html, body {
  height: 3000px;
}

#coolCat {
  background-image: url("https://newevolutiondesigns.com/images/freebies/cool-wallpaper-1.jpg");
  background-size: 100% 250px;
  background-repeat: no-repeat;
  width: 100%;
  height: 50%;
  background-attachment: fixed;
}

<div id='coolCat'></div>