css 移除：滚动时的目标样式

xoshrz7s 于 2023-04-23 发布在其他

关注(0)|答案(4)|浏览(97)

我添加了以下内容以允许锚链接的平滑滚动。：target：before样式将偏移粘性标题：

html {
    scroll-behavior: smooth;
}
:target:before {
    content:' ';
    display: block;
    height: 65px;
}

这很好用，但是如果你向上滚动页面，会留下一个65px的间隙。我想在你再次滚动时删除:target:before样式。
我尝试了以下方法，但没有成功：

$(window).scroll(function() {
    $(':target:before').hide();
});

有什么好的解决方案吗？

$('a').on('click', function() {
  var anchorLink = $('a').attr('href');
  $(anchorLink).addClass('activeAnchor');
  $(window).on('keyup DOMMouseScroll', function(e) {
    if( e.which == 33     // page up 
     || e.which == 34     // page dn 
     || e.which == 32     // spacebar
     || e.which == 38     // up 
     || e.which == 40     // down 
     || (e.ctrlKey && e.which == 36)     // ctrl + home 
     || (e.ctrlKey && e.which == 35)     // ctrl + end 
     || e.type == 'DOMMouseScroll' ) 
    {
    $(anchorLink).removeClass('activeAnchor');
    }
  });
});

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.activeAnchor:before {
  content: ' ';
  display: block;
  height: 65px;
}

<!DOCTYPE html>
<html>

<body>
  <header>HEADER</header>
  <div style="padding-top:70px;">
    <h1>My First Heading</h1>
    <p><a href="#anchor" class="anchor">Anchor Link</a></p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h2 id="anchor">Anchor.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</html>

css

来源：https://stackoverflow.com/questions/53052684/remove-target-styles-on-scroll

4条答案

按热度按时间

snz8szmq1#

请注意，您不能使用JavaScript或jQuery**select pseudo-elements。Learn more

但是 *，您可以通过使用CSS类来实现所需的输出。例如，您可以使用inactive类：

:target.inactive:before {
  display: none;
}

每当用户手动滚动时，将inactive类添加到:target元素中。当用户单击任何锚点时，将其删除。

$(window).on('DOMMouseScroll', function() {
  $(':target').addClass('inactive');
}); // a more effective event listener is provided in the code for *Manual Scroll*

$('a').on('click', function() {
  $(':target').removeClass('inactive');
});

上面的技巧将执行与jQuery的.hide()函数相同的功能。
这已经在Chrome v70和Firefox Quantum v63中进行了测试，结果非常成功！

$(window).on('keyup DOMMouseScroll', function(e) {
  if( e.which == 33     // page up 
   || e.which == 34     // page dn 
   || e.which == 32     // spacebar
   || e.which == 38     // up 
   || e.which == 40     // down 
   || (e.ctrlKey && e.which == 36)     // ctrl + home 
   || (e.ctrlKey && e.which == 35)     // ctrl + end 
   || e.type == 'DOMMouseScroll' ) 
  {
    $(':target').addClass('inactive');
  }
});

$('a').on('click', function() {
  $(':target').removeClass('inactive');
});

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

:target:before {
  content: ' ';
  display: block;
  height: 65px;
}

:target.inactive:before {
  display: none;
}

<!DOCTYPE html>
<html>

<body>
  <header>HEADER</header>
  <div style="padding-top:70px;">
    <h1>My First Heading</h1>
    <p><a href="#anchor">Anchor Link</a></p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h2 id="anchor">Anchor.</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
      printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
      of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</html>

赞(0）回复(0）举报 2023-04-23

imzjd6km2#

希望这有帮助。使用“：target”只在第二次点击时有效，所以这可能不是理想的。下面的例子可能会引导你通过一些进一步的调整来解决问题。

$('a[href^="#"]').on('click', function() {
  $('h2').addClass('youAreHere');
});


$(window).on('scroll', function() {
  var scrollUp = $(window).scrollTop();
  var rightHere = $('.youAreHere').length;
  var offTop = $('h2').offset().top;
  var offHgt = $('h2').height();

  if (scrollUp >= offTop + offHgt && rightHere) {
    $('h2').removeClass('youAreHere');
  }
});

/* Just for testing in SO snippet*/

body {
  min-height: 800px;
}

header {
  position: fixed;
  height: 50px;
  background: #000;
  opacity: .75;
  color: #fff;
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

.youAreHere:target::before {
  content: ' ';
  display: block;
  height: 65px;
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>HEADER</header>
<div style="padding-top:70px;">
  <h1>My First Heading</h1>
  <p><a href="#anchor">Anchor Link 1</a></p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <h2 id="anchor">Anchor.</h2>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

赞(0）回复(0）举报 2023-04-23

tzdcorbm3#

只是偶然发现了这个，而寻找不同的东西，但你不能只是用途：

html{
    scroll-behaviour: smooth;
    scroll-padding-top: 65px;
}

看起来它会做同样的事情，但没有任何JavaScript？

赞(0）回复(0）举报 2023-04-23

bejyjqdl4#

手动替代属性：

$(window).scroll(function() {
  $(':target::before').css('height', '0px');
});

赞(0）回复(0）举报 2023-04-23

我来回答

css 移除：滚动时的目标样式

4条答案

相关问题

热门标签

最新问答