HTML

Question

我有一个header元素，其下方有article元素。 article有overflow: scroll。请访问我的网站here。

我的目标是让header半透明，以便滚动时article内容会显示在其后面。我希望article溢出显示header。

主要限制是滚动条应该从header的底部开始，而不是顶部。

如何才能完成这样的效果？

Answer 1

诀窍是复制内容。以下是具有模糊和半透明标题的解决方案。

$(function() {
  // Clone the content
  var $content = $('.content');
  var $clone = $('.clone').html($content.html());
  
  // Performance scrolling
  var content = $content.get(0);
  var clone = $clone.get(0);
  content.onscroll = function() {
    clone.scrollTop = content.scrollTop;
  };
});

div {
  width: 400px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.content {
  top: 50px;
  overflow: scroll;
}

.clone {
  padding-top: 50px;
  overflow: hidden;
  -webkit-filter: blur(2px);
}

.header {
  height: 50px;
}

.overlay {
  background: rgba(240, 240, 240, 0.8);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at orci vestibulum, congue urna nec, fringilla dolor. Donec pellentesque odio non dui vehicula, eu gravida odio rhoncus. Sed eleifend eu nisi ullamcorper ultricies. Ut ante velit, facilisis
</div>
<div class="header">
  <div class="clone"></div>
  <div class="overlay"></div>
</div>

Answer 2

更新：只有'scroll'个活动，没有'wheel'或'mousewheel'。

CSS和JavaScript？

以下是(jsfiddle)。

在 Firefox 46 和 Chrome 50 中进行测试。

此解决方案在可滚动元素中使用空虚拟元素，其大小与内容承载元素的高度（隐藏滚动条）相匹配，并使用一些轻量级JavaScript在内容和虚拟内容之间传递'scroll'事件。 / p>

优点：

使用浏览器＆＃39;原生滚动条和scroll事件。
无需额外的库
不会压低DOM

缺点：

这是一个黑客攻击。但这就是我们的工作！

HTML

<div id="wrapper">
  <div id="header"></div>
  <!-- An empty dummy to carry the scrollbar -->
  <div id="scroll-wrap">
    <div id="scroll-dummy"></div>
  </div>
  <!-- Content -->
  <div id="content-view">[Actual content.]</div>
</div>

CSS

body { overflow: hidden; }

#content-view {
  position: absolute;
  z-index: 0;
  top: 0; /* Place content behind header. */
  height: 100vh; /* Fill viewport. */
  overflow-y: scroll; /* Hidden scrollbar. */
}

#header {
  position: relative; /* Enable z-index. */
  z-index: 1; /* Place header above content. */
  height: 25vh; /* Top of viewport. */
}

#scroll-wrap {
  position: absolute; 
  z-index: 1; /* Place scrollbar above content. */  
  top: 25vh; /* Skip header. */
  height: 75vh; /* Fill remaining viewport. */
  right: 0; /* Avoid non-scroll mouse events. */
  overflow-y: scroll; /* Scrollbar! */  
}
#scroll-dummy { width: 1px; } /* Firefox won't scroll width:0 elements! */

的JavaScript

var $ = document.getElementById.bind(document),
  contentView = $('content-view'), scrollDummy = $('scroll-dummy'),
  scrollWrap  = $('scroll-wrap'), wrapper = $('wrapper'), header=$('header');
  scrollWidth = scrollWrap.offsetWidth - scrollWrap.clientWidth;

// Hide content's actual scrollbar
contentView.style.right = -scrollWidth + 'px';

// Copy height of visible content to hidden dummy
function onContentChange() {
  window.requestAnimationFrame(function() {
    scrollDummy.style.height = contentView.scrollHeight - header.offsetHeight + 'px';
  });
}
window.addEventListener('resize', onContentChange);
onContentChange(); // Call whenever the contentView node changes!

// No event-triggering feedback loops    
var fromContent = false, fromScroll = false; 
// Update scrollbar scroll on content scroll
animate(contentView, 'scroll', function(e){
    if (fromScroll) fromScroll = false;
    else {
        fromContent = true;
        scrollWrap.scrollTop = contentView.scrollTop; // Scroll the scrollbar
    }
});
// Update content scroll on scrollbar scroll
animate(scrollWrap, 'scroll', function(){
    if (fromContent) fromContent=false;
    else {
      fromScroll = true;
      contentView.scrollTop = scrollWrap.scrollTop; // Scroll the content   
    }
});

// Wrap event handler with throttled rAF
function animate(element, event, func) {
  var lock = false;
  element.addEventListener(event, function(e) {
    if (!lock) {
      lock = true;
      window.requestAnimationFrame(function(){ func(e); lock = false; });
    }
  }, false);
}

Answer 3

您可以通过向内容（滚动）添加填充来实现此目的，填充与标题的高度相同。然后将内容向上移动到标题下（并使标题透明）。然后使用一些javascript和html / css创建一个自定义滚动条，该滚动条与标题有一个偏移量。

Answer 4

可滚动元素将始终通过其边界框剪切内部内容。除非他们在规范中添加overflow: visible-scroll之类的东西（我希望！）。

针对这种特殊情况有一种解决方法：custom Webkit scrollbar（仅限Webkit）。只需设置“向上”按钮的样式，使其高度和背景颜色与标题相匹配。这将确保滚动条的轨道不会在标题下方延伸，同时保持样式一致。

JSFiddle: "Webkit Scrollbar Hack For Translucent Headers"

header {
    background: rgba(240, 240, 240, 0.9);
    height: 60px;
}

::-webkit-scrollbar-button:start {
    background: rgba(240, 240, 240, 0.9);
    height: 60px;
}

请务必填充可滚动内容区域的顶部。

#content {
    padding-top: 60px;
}

至于非Webkit浏览器，我可以想到没有CSS的解决方案。

溢出滚动但可见

4 个答案:

优点：

缺点：

HTML

CSS

的JavaScript