Question

所以我正在检查页面的代码，我可以看到在网站上向下滚动一个元素div来自：

<div class="badge-entry-toolbar-sticky post-afterbar-a in-post-top" style=""></div>

到此：

<div class="badge-entry-toolbar-sticky post-afterbar-a in-post-top sticked" style="position: fixed; z-index: 3; top: 0px;"></div>

如何做到这一点？

Answer 1

它被称为粘性标题（元素）。

这是纯JS的一个例子。

HTML：

<header class="header" role="banner">
    <!-- ... -->
</header>

CSS：

.sticky {
  position: fixed;
  z-index: 9999;
  width: 100%;
}

JS（jQuery）：

$window = $(window);
$window.scroll(function() {
  $scroll_position = $window.scrollTop();
  if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
    $('.header').addClass('sticky');
    header_height = $('.header').innerHeight();
    $('body').css('padding-top' , header_height);
  } else {
    $('body').css('padding-top' , '0');
    $('.header').removeClass('sticky');
  }
});

Answer 2

他们使用JavaScript来改变div的状态。

var myDiv = document.getElementById('myDiv');
myDiv.classList.add('sticky');

Answer 3

示例：https://jsfiddle.net/L17sptbb/

HTML

<div id="mydiv" class="oldclass">text</div>

JS

document.getElementById('mydiv').className = 'newclass';

CSS

.oldclass { color: blue }
.newclass { background-color: yellow }

如何更改元素的状态

3 个答案: