如何防止瀏覽器調整大小時滾動的固定位置元素？

我必須開始說我正在一個巨大的學習曲線，這個網站項目是在我的業餘時間作爲一個禮物給某人，所以我的知識是有限的，雖然我認爲我理解的基礎知識。另外請注意，我確實有另一個更基本，不太有趣的網站已經建立作爲備份，所以如果我被告知所有的代碼是垃圾，我需要重新開始！如何防止瀏覽器調整大小時滾動的固定位置元素？

我正在爲化妝師創建一個單頁橫向滾動的投資組合網站，該網站要求我在左手邊有我的菜單列表，並使用javascript，頁面滾動很好，順利的相關部分。

在我的屏幕分辨率上，一切看起來都很棒，我的瀏覽器尺寸合適，但我注意到，如果我縮小瀏覽器窗口，固定導航橫幅開始滾動到不合適的位置，而其他所有東西都保持在一起正如它應該。

最終的結果應該是所有東西都保持原位，唯一的'移動部分'是滾動部分的內容，所以當瀏覽器調整大小時，所有東西都會重新調整大小或至少滾動到一起。

我已經玩弄了一切，在內容div和我已經嘗試了不同的定位，但似乎沒有任何工作。

下面是各部分我基本的HTML佈局：

<html> 
<body> 

<div id="banner"> <!--this is the fixed nav banner--> 
<ul> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#testimonials">TESTIMONIALS</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
</ul> 
</div> 

<div id="portfolio" class="bigpanel"> 
<div id="portfolioimages"> 
    <!--IMAGES GO HERE--> 
</div> 
</div> 

<div id="about" class="panel"> 
</div> 

<div id="testimonials" class="bigpanel"> 
</div> 

<div id="contact" class="bigpanel"> 
</div> 

<div id="footer"> 
</div> 

</body> 
</html>

...和CSS：

body { 
    width: 15000px; 
    height: 580px; 
    background-color: #fcf4f1; 
    position: absolute; 
    margin: 2% 0 5% 0; 
} 

#footer { 
    position: fixed; 
    left: 935px; 
    top: 645px; 
    margin: 10px; 
} 

#banner { 
    position: fixed; 
    height: 580px; 
    width: 200px; 
    background-color: #fff; 
    opacity: 0.8; 
    line-height: 20px; 
    margin: 45px 0px 0px 20px; 
    padding: 0; 
    z-index: 999; 
} 

.panel { 
    width: 930px; 
    float: left; 
    padding-left: 242px; 
    padding-right: 1040px; 
    margin-top: 45px; 
} 

.bigpanel { 
    float: left; 
    padding-left: 242px; 
    padding-right: 1040px; 
    margin-top:45px; 
}

Pic of how the site is at the correct size

...and a pic of how it looks when it's squished in height!

我一直在努力，是儘可能徹底地爲長久的一個抱歉！

任何幫助將不勝感激。

來源

2015-12-11 coblong

如果你把它放在小提琴中，我可以用它彈奏 –

看起來像你想要的是橫幅方向固定而不是垂直方向，所以它始終保持距離你左邊20px窗口，但不需要窗口頂部45px。它是否正確？如果是這樣，這不能單獨用HTML和CSS來完成。你也使用Javascript嗎？ – digglemister

@SamJacobs這真是太棒了，但當我說我正處在一個巨大的學習曲線中 - 我甚至不知道該怎麼做。我現在會研究它。 – coblong

好吧，我不知道我的答案是否適用於所有人，但對我而言確實如此。

我基本上長了一個眼神，看我是如何爲我的網站中的基本所有元素定義寬度和高度的，並且發現雖然寬度需要固定在主體和橫幅上，但高度可能是根據視口大小進行響應。

我把所有東西都包在一個非常寬的包裝div中，高度設置爲100％，但將身高設置爲84vh，最大高度爲700px（這樣我的圖片可以具有相同的最大高度並始終看起來不錯）。

這樣我也可以將橫幅設置爲高度：84vh，最大高度爲700px，因此它永遠不會溢出，但總是會縮小尺寸。

我爲我的包裝垂直居中設置了邊距，而現在一切都適合其容器內部，沒有垂直滾動！

我敢肯定，它很多是一個醜陋的解決方案，由我的錯誤編碼造成的，但它現在起作用了！

來源

2015-12-14 21:45:24 coblong

我想你必須把top屬性#banner div放到0。這項工作只與像fixed，absolute,relative等職位。它會做什麼是固定你的div在瀏覽器窗口的頂部，無論如何。 這是你的div相對於屏幕的「頂部填充」（不適用）。

所以，你應該只需要添加

top: 0;

到

#banner

，它應該工作！

如果你想它的個例是efficacity，我建議你看看這個codepen：http://codepen.io/Symsym/pen/LsjCK

乾杯！並告訴我它是否有效。

來源

2016-05-08 01:17:09 Nazrinn

<body> 
<div class="banner"> <!--this is the fixed nav banner--> 
    <ul> 
    <li><a href="#portfolio">PORTFOLIO</a></li> 
    <li><a href="#about">ABOUT</a></li> 
    <li><a href="#testimonials">TESTIMONIALS</a></li> 
    <li><a href="#contact">CONTACT</a></li> 
    </ul> 
</div> 
<div class='content'> 
    <div id="portfolio" class="bigpanel"> 
    <div id="portfolioimages"> 
     <!--IMAGES GO HERE--> 
    </div> 
    </div> 

    <div id="about" class="panel"> 
    about 
    </div> 

    <div id="testimonials" class="bigpanel"> 
    testimonials 
    </div> 

    <div id="contact" class="bigpanel"> 
    contact 
    </div> 
</div> 
<div class="footer"> 
footer is here!! 
</div>

CSS代碼：

body { 
    background-color: '#fcf4f1'; 
    overflow:hidden; 
} 

a{ 
    text-decoration:none; 
} 

li{ 
    list-style:none; 
} 

.banner { 
    position: fixed; 
    width: 200px; 
    background-color: '#ccc'; 
    opacity: 0.8; 
    padding: 0; 
    z-index: 999; 
    top:20px; 
    left:0; 
} 

.content{ 
    width:800px; 
    margin-left:200px; 
    overflow:auto; 
    float:left; 
} 

.panel { 
    margin-top:10px; 
    width: 930px; 
    float: left; 
} 

.bigpanel { 
    float: left; 
    margin-top:20px; 
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
    background:red; 
    margin: 10px; 
}

可以在內容滾動。

來源

2017-05-29 10:26:50

如何防止瀏覽器調整大小時滾動的固定位置元素？

回答

相關問題