Question

我想创建一个向下滚动后出现的辅助标题（当我的实际标题消失时）。我尝试了一个名为＆＃39; Headhesive＆＃39;的jquery插件，但没有运气。这就是我要求的 https://markgoodyear.com/labs/headhesive 这里当主标题消失时，出现第二个标题，它是固定的标题。

Answer 1

我不会为您写出所有代码，但这可能会让您了解如何实现您想要的目标。

将scroll事件侦听器添加到文档正文中。
检查文档是否滚动过某个点
如果文档滚动过某个点，请隐藏“第一个”标题，并显示“第二个”标题。

第二个标头可能只有top和left 0px的{{1}}的CSS，使标题显示在页面顶部。< / p>

收听滚动位置的示例：

position absolute

Answer 2

此页面显示了如何使用您已显示的插件，指示如何在另一个类附近显示标题等。 http://www.cssscript.com/simple-on-demand-sticky-header-with-pure-js-headhesive-js/

Answer 3

我在这里为你做了一个例子：jsfiddle

或者您可以查看下面的代码段

// Options
var options = {
  // Scroll offset. Accepts Number or "String" (for class/ID)
  offset: 1, // OR — offset: '.classToActivateAt',

  // Custom classes
  classes: {

    // Cloned elem class
    clone: 'banner--clone',

    // Stick class
    stick: 'banner--stick',

    // Unstick class
    unstick: 'banner--unstick'
  },

  // Throttle scroll event to fire every 250ms to improve performace
  throttle: 250,

  // Callbacks
  onInit: function() {},
  onStick: function() {},
  onUnstick: function() {},
  onDestroy: function() {},
}

// Create a new instance of Headhesive and pass in some options
var header = new Headhesive('.banner', options);

body {
  height: 1500px;
}

<link href="https://rawgit.com/markgoodyear/headhesive.js/master/demo/css/headhesive.css" rel="stylesheet" />
<script src="https://rawgit.com/markgoodyear/headhesive.js/master/dist/headhesive.min.js"></script>
<header class="banner">
  My New Header/Navigation
</header>

向下滚动页面后出现的标题

3 个答案: