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

问题描述：

我有一个固定位置固定在页面顶部。这将使我跟着我滚动到文档或页面的中间。在文档中间之后，我想把它粘在文档的中间，然后不用它。在我再次向上滚动后，我想让它回到我的位置（固定位置）。滚动一段距离后删除JavaScript中的固定位置

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

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

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

我没有看到问题 – Shanimal

你想让它与图像一起出现吗？ – Anthony

答

这听起来像是你想让你的元素跟着你到一个点，就好像它击中了页面中的一个看不见的墙？在这种情况下，我建议确定该断点（以页面顶部的像素为单位），并将其位置设置为absolute，并使用您计算的top值。切换onScroll和onResize上的定位逻辑，也可能在您处于回调状态时调节回调。

完美。谢谢林肯安德森。 –

答

你走在正确的轨道上，但没有代码很难提供一个坚实的答案。

我最好的尝试是首先让页面与你提到的div一起工作，放置在页面的中心位置，你希望它在中途滚动后如何出现。一旦你的，创建一个使用一个额外的类次要的CSS设置，使其固定在页面的顶部：

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

一旦你满意的两个版本，然后在你的jQuery脚本工作切换基于窗口位置开启/关闭额外的课程：您可以轻松搜索并找到一个好的解决方案。正如林肯所说的，您可能想要限制脚本，使其不会在每次滚动事件发生时都运行。

太好了。如果我可能会问，通过“限制脚本使其不会在每次发生滚动事件时都运行”，这是什么意思？我不是来自JS背景，但它听起来像我的方法会导致性能问题，因为滚动触发事件！我将修改我的问题以现在添加更多代码。 –

查看此出答案http://*.com/questions/9613594/scroll-event-firing-too-many-times-i-only-want-it-to-fire-a-maximum-of-say-on – Shnibble

在那里添加了整个功能。我还没有包括设置顶部和切换固定位置的部分，因为它现在已经清楚并且将会执行。现在的问题是这种方法会导致性能问题，因为它在页面中的每个滚动都会被调用？ –

答

如果你想这与图像工作，你可以设置background-image，background-size（如果你想改变图像大小），background-repeat和div内background-attachment性能。

背景图像
设置background-image在其中您的图像所在的文件夹中的网址或位置。

背景重复
设置background-repeat到no-repeat所以background-image不会在您的div

背景附件
设置background-attachment到fixed重复。它将保持原状，直到div滚动到最后。

既然你想要的形象消失，一旦你已经打了页面的中间设置你的div小号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>

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

相关推荐