鏈接片段無法在固定位置的目標上工作

-1

我正在製作1頁網站，所以我的菜單中有鏈接片段，可將您移動到頁面的正確部分。鏈接片段無法在固定位置的目標上工作

我的問題是底部部分有固定的定位意味着鏈接片段可以發揮作用。我已經將底部填充添加到了主體中，因此當您向下滾動時，最後一部分會顯示在頁面內容的其餘部分。這有什麼解決方案？

當鏈接被點擊時，我可以使用JavaScript向下滾動頁面，但我不確定屏幕閱讀器或其他可用性設計對此的影響。

<div id="menu"> 
    <a href="#one">One</a> 
    <a href="#two">Two</a> 
    <a href="#three">Three</a> 
    <a href="#four">Four</a> 
    <a href="#five">Five</a> 
    <a href="#last">Last</a> 
</div> 
<div id="one"> 
    One 
</div> 
<div id="two"> 
    Two 
</div> 
<div id="three"> 
    Three 
</div> 
<div id="four"> 
    Four 
</div> 
<div id="five"> 
    Five 
</div> 
<div id="last"> 
    Last 
</div> 

#one, #two, #three, #four, #five { 
    border: 3px solid red; 
    background: grey; 
    width: 100%; 
    height: 300px; 
    z-index: 2; 
    position: relative; 
} 
#last { 
    position: fixed; 
    bottom: 0; 
    border: 3px solid green; 
    background: yellow; 
    z-index:1; 
    width: 100%; 
    height: 300px; 
} 
body { 
    padding-bottom: 300px; 
} 
#menu { 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 3; 
    background: white; 
}

來源

2013-11-22 Evans

我們可以看到一些代碼或者JsFiddle嗎？ –

請在此處添加有意義的代碼和問題描述。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。此外，請不要將鏈接到需要修復的網站 - 否則，一旦問題解決，此問題將失去對未來訪問者的任何價值。 –

我更新了我的問題。 – Evans

我覺得我發現了一個解決方案。使鏈接片段目標靜態定位，並使其中的div固定定位似乎工作。

來源

2013-11-25 09:41:22 Evans

的問題不在於#last沒有被鏈接到，那就是它具有較低z-index。當你鏈接到它時，div仍然隱藏在其他div s之後。當您點擊#last鏈接時，您只需更改z-index即可。您也可以使用scrollTop移動到屏幕底部，並通過移動其他屏幕來顯示#Lastdiv。

爲了清楚position

relative正常流動的元件，但允許的位置能夠相對於使用關於top，left，right，和bottom屬性設置的值其正常位置上。

absolute將該元素相對於其最近定位的父元素的邊緣放置。如果已經設置了該元素的位置，該元素將成爲文檔的主體或嵌套的元素。

使用您的示例我已更新它，以便點擊#last將使div顯示。

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $("#last-link").click(function() { 
      //$("#last").css("z-index", "3") 
      $("html, body").animate({ scrollTop: $(document).height()-$(window).height() }, "fast"); 
     }); 
     $("a:not(#last-link)").click(function() { 
      $("#last").css("z-index", "1") 
     }); 
    }) 
    </script> 
    <style type="text/css" media="all"> 
     #one, #two, #three, #four, #five { 
      border: 3px solid red; 
      background: grey; 
      width: 100%; 
      height: 300px; 
      z-index: 2; 
      position: relative; 
     } 
     #last { 
      position: fixed; 
      bottom: 0; 
      border: 3px solid green; 
      background: yellow; 
      z-index:1; 
      width: 100%; 
      height: 300px; 
     } 
     body { 
      padding-bottom: 300px; 
     } 
     #menu { 
      position: fixed; 
      top: 0; 
      right: 0; 
      z-index: 3; 
      background: white; 
     } 
    </style> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 

</head> 
<body> 
    <div id="menu"> 
     <a href="#one">One</a> 
     <a href="#two">Two</a> 
     <a href="#three">Three</a> 
     <a href="#four">Four</a> 
     <a href="#five">Five</a> 
     <a href="#last" id="last-link">Last</a> 
    </div> 
    <div id="one">One</div> 
    <div id="two">Two</div> 
    <div id="three">Three</div> 
    <div id="four">Four</div> 
    <div id="five">Five</div> 
    <div id="last">Last</div> 
</body> 
</html>

來源

2013-11-25 06:07:35

我希望最後一部分具有固定的位置，以便在向下滾動到頁面底部時顯示在其他內容的後面。 – Evans

如果它落後於其他人，那很好。但是當你點擊Last時，你希望鏈接顯示什麼？帶來如果轉發？如果沒有，它會進入鏈接，它只是沒有顯示任何東西，因爲它仍然存在。 –

我想滾動到頁面的底部，因爲這是如何顯示該元素。 – Evans

你不能使這個工作與固定的位置，因爲當點擊鏈接，HTML檢索當前位置#last並滾動頁面到該位置。由於您的#last div處於可見區域，因此html不會一直向下滾動。你必須使用JS來使它工作。

來源

2013-12-01 19:42:13 Arpit

鏈接片段無法在固定位置的目標上工作

回答

相關問題