滚动到某个点后删除粘性标题

Question

我想在它从顶部达到 300px 后从标题中删除粘性

css

但是

css

我无法这样做并且我有0

jquery

知识。

仅靠 css 有可能吗？

这是我的示例代码

Answer 1

我已将此添加到 jsfiddle 中，您需要使用 jquery 才能使其正常工作。

请看： https://jsfiddle.net/975zff02/

$(function(){
  $(window).scroll(function(e) {
    if($(this).scrollTop()>300){
      $('.header').fadeOut(); // Fading out the button on scroll after 300px
    }
    else{
      $('.header').fadeIn(); // Fading in the button on scroll if less than 300px
    }
  });
});

Answer 2

您可能希望查看

position: sticky

以获取仅 CSS 的解决方案。 https://developer.mozilla.org/en/docs/Web/CSS/position#Sticky_positioning

Answer 3

你实际上不需要 jQuery。你可以用 javascript 做到这一点。

可以报班；

.header

例如，给你并使用以下纯 js：

var header = document.querySelector('.header');
var isHeaderHidden = false;

function onScroll() {
  if (window.pageYOffset > 300 && !isHeaderHidden) {
    header.style.opacity = "0";
    isHeaderHidden = true;
  } else if (window.pageYOffset <= 300 && isHeaderHidden) {
    header.style.opacity = "1";
    isHeaderHidden = false;
  }
}

var debouncedOnScroll = debounce(onScroll, 50);
window.addEventListener('scroll', debouncedOnScroll);

function debounce(fn, delay) {
  var timer = null;

  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
}

简单说明：

• var header = document.querySelector('.header');

  ：此行检索文档中类为“header”的第一个元素，并将其分配给变量

  header

  ,

• var isHeaderHidden = false;

  ：这一行将变量

  isHeaderHidden

  初始化为

  false

  ，稍后用于跟踪

  .header

  元素当前是否隐藏。

• function onScroll() {...}

  ：每当窗口滚动时调用此函数。它检查滚动位置是否大于 300 像素以及标题当前是否可见。如果两个条件都为真，它通过将其

  opacity

  属性设置为0 并将

  isHeaderHidden

  设置为

  true

  来隐藏标题。如果滚动位置小于或等于 300 像素并且标题当前隐藏，则通过将其

  opacity

  属性设置为 1 并将

  isHeaderHidden

  设置为

  false

  来显示标题。

• var debouncedOnScroll = debounce(onScroll, 50);

  ：此行通过调用

  debounce

  函数创建一个新的去抖动函数，其中

  onScroll

  作为第一个参数，

  50

  作为第二个参数。结果函数被分配给变量

  debouncedOnScroll

  .

• window.addEventListener('scroll', debouncedOnScroll);

  ：这一行将

  debouncedOnScroll

  函数附加到窗口对象的滚动事件。每当窗口滚动时，就会调用

  debouncedOnScroll

  函数。

• function debounce(fn, delay) {...}

  ：这是一个实用函数，它将一个函数和一个延迟时间作为参数并返回一个新的去抖动函数。返回的函数将原函数的执行延迟指定的延迟时间，如果在延迟期间再次调用该函数，延迟时间将被重置。这有助于防止原始函数被过于频繁地调用。

在这里查看我的 jsfiddle：https://jsfiddle.net/UwGod/p5rzbq4y/3/