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

如果您希望将其用于图片，可以设置background-image，background-size（如果您想更改图片的大小），background-repeat和{{1 } background-attachment中的属性。

<强>背景图片
将div设置为您的图片在文件夹中所在的网址或位置。

<强>背景重复
将background-image设置为background-repeat，以便在no-repeat

中不再重复background-image

<强>背景附件
将div设置为background-attachment。它将保持原位，直到fixed滚动到最后。

由于您希望图片在点击页面中间后消失，请将div div height设置为50%并设置html和{{ 1}}身高到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; }

滚动一些距离后，在JavaScript中删除固定位置

3 个答案: