Question

我正在尝试为博客帖子制作垂直分享按钮。

当阅读器滚动时，垂直容器应该有一个固定的位置，在将top: 15px;设置为垂直容器后，它会覆盖标题div，这是我的问题。我希望它能修复但在标题下。

知道标题的高度未知。

那么有哪些解决方案？

html{
    margin:0 49px;
}

.panel{
    border-radius: 4px;
    border: 1px solid gray;
    height:600px;
    width:100%;
}
.title{
       background-color: cyan; 
    height:60px;
    text-align: center;
    padding-top:15px;
}
.content{
    padding:15px 60px 15px 15px;
}
.vertical-container{    
    position:	fixed;
	right: 45px;
	top:15px;
	min-height: 200px;
	background-color:	#3B5998;
	width:	60px;
}
.vertical-container:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: 100%;
    border-style: solid;
    border-width: 5px 5px;
    right: 0px;
    border-color: #23355B transparent transparent #23355B;
}

<div class="panel">
    <div class="title"> unknown title height </div>
    <div class="content">
        Performed suspicion in certainty so frankness by attention pretended. Newspaper or in tolerably education enjoyment. Extremity excellent certainty discourse sincerity no he so resembled. Joy house worse arise total boy but. Elderly up chicken do at feeling is. Like seen drew no make fond at on rent. Behaviour extremely her explained situation yet september gentleman are who. Is thought or pointed hearing he. 
 Rendered her for put improved concerns his. Ladies bed wisdom theirs mrs men months set. Everything so dispatched as it increasing pianoforte. Hearing now saw perhaps minutes herself his. Of instantly excellent therefore difficult he northward. Joy green but least marry rapid quiet but. Way devonshire introduced expression saw travelling affronting. Her and effects affixed pretend account ten natural. Need eat week even yet that. Incommode delighted he resolving sportsmen do in listening. 

    </div>
<div class="vertical-container"></div>
</div>

如果您更喜欢fiddle example。

Answer 1

假设你没有使用jQuery，这里有一个vanilla javascript解决方案。它获得了标题高度，然后将其作为垂直容器的顶部位置。

<script>
    // get title element
    var el = document.getElementsByClassName('title')[0],
        // get vertical container element
        container = document.getElementsByClassName('vertical-container')[0],
        // get height of title
        elHeight = el.offsetHeight;
    // set vertical container height
    container.style.top = elHeight + 'px';
</script>

Answer 2

如果没有javascript，您可以从标题顶部100％（标题的高度）定位您的容器。要实现这一点，容器div必须位于标题div内或相同（标题）高度的标题容器中。

的CSS：

.title{
//  height:60px; unknown...
    text-align: center;
    padding-top:15px;
}

.title-container {
  position: fixed;
  top: 0px;
}

.vertical-container{    
    position: absolute;
    top:100%;

    right: 45px;
    min-height: 200px;
    background-color:   #3B5998;
    width:  60px;
}

HTML：

<div class="panel">

  <div class="title container">
    <div class="title"> unknown title height </div>
    <div class="vertical-container">
      <div>Like!</div>
    </div>
  </div>

  <div class="content">
    Performed suspicion...
  </div>
</div>

现在，标题（或其容器）固定在顶部，高度为x ...

要小心边距，因为它们不包含在此元素的高度计算中。使用固定在顶部且边缘为0的不可见容器，如果您愿意，可为标题指定边距

...垂直容器放置在100％（x）下面，绝对是固定的父级。

将固定div定位在另一个div下用于滚动

2 个答案: