頂部的HTML靜態欄覆蓋了該部分的鏈接

我在網站頂部有一個靜態水平欄，欄的高度爲100px。在HTML的身體我有類似：頂部的HTML靜態欄覆蓋了該部分的鏈接

<a name="photo-section"></a>

所以我記得從我的網站www.domain.com/#photo-section 該節中的問題是，巴蓋部分（100像素）的照片部分，因爲它是靜態的;有沒有解決這個問題的方法？我在頂部添加了一個白色的div，但在實際網站上看起來很糟糕。

你可以看到這個問題，當你在導航鏈接「照片」，單擊in here

感謝

來源

2016-09-12 Gonzalo

你能分享更多信息嗎？也許鏈接到小提琴/實際網站？一些正在使用的CSS代碼？ – tewathia

發佈您的HTML佈局。 – PsyGik

嘗試爲身體頂部的div添加「margin-top」。如果有小提琴，很容易糾正。 – Sasikumar

解決方案1：您可以加入少許CSS試試這個：

<a href="#photo-section">Jump to Photo Section</a> 

[....] 
<a name="photo-section" style="display: block; padding-top: 100px;">Photo Section</a>

解決方案2：或者使用jQuery或其他類似javascript：

<a name="photo-section" id="photo-section">Photo Section</a>

然後

<script> 
function scrollBonus(id) { 
    $('html, body').animate({scrollTop: ($(id).scrollTop() + 100) + 'px'}, 300); 
} 
</script>

觸發動畫，如果你想觸發它即使訪問者點擊從另一頁你的鏈接：

<script> 
    $(document).ready(function() { 
      scrollBonus(window.location.hash); 
    }); 
</script>

希望這有助於。

來源

2016-09-12 08:01:55 ThinhIT

Hey Thinh Nguyen，第一個解決方案「作品」我在發佈之前嘗試過，但問題是它在網站上留下了一個巨大的（100px）空間;我想避免這種情況。使用javascript可能會做這項工作，但有時在網站上沒有鏈接，但#photo在另一個頁面，因此我應該捕獲每個請求，並檢查是否有＃等，它變得有點混亂。另外一個解謝謝 – Gonzalo

@Gonzalo看到我編輯的答案，看看它是否有幫助。多一點JavaScript應該這樣做。在這一點上，我沒有提出任何其他解決方案，而不是這個。 – ThinhIT

頂部的HTML靜態欄覆蓋了該部分的鏈接

回答

相關問題