粘滯頁腳，延伸到網站底部並進一步滾動時

我有一個非常好的主意讓我的項目更漂亮。
我想的是，頁腳是標準像下面的圖片：
Website Picture 粘滯頁腳，延伸到網站底部並進一步滾動時

當我現在滾動進一步下跌，該頁腳上升，怒吼咆哮，是所有像「IMPRESSUM」和「聯繫的東西」。
我在互聯網上搜索了各種解決方案，但找不到合適的東西。
我希望你能幫助我。

代碼我的頁腳：

HTML：

<footer> 
    <div class="footer"> 
      <p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a></p> 
    </div> 
</footer>

CSS：

.footer { 
    position: fixed; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    width: 100%; 
    padding-top: 10px; 
    background: #F28724; 
    font-size: 1.3em; 
} 
.footer-text { 
    color: #3a3a3a; 
} 
.footer-text > a { 
    color: #3a3a3a; 
    display: table; 
    text-align: center; 
    margin-right: auto; 
    margin-left: auto; 
}

來源

2016-09-01 Benjamin Pössenberger

在哪裏了嗎？ – matthiasunt

sry，我修正了它 –

這將是偉大的有一個完整的HTML代碼或https://jsfiddle.net/例如 –

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(document).scrollTop() > 100) { 
 
     $('.footerContent').slideDown(650); 
 
    } else if ($(document).scrollTop() < 100) { 
 
     $('.footerContent').fadeOut(500); 
 
    } 
 
    }); 
 
})

body, 
 
html { 
 
    height: 1000px; 
 
} 
 
.footer { 
 
    position: fixed; 
 
    z-index: 99; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    padding-top: 10px; 
 
    background: #F28724; 
 
    font-size: 1.3em; 
 
} 
 
.footer-text { 
 
    color: #3a3a3a; 
 
} 
 
.footer-text > a { 
 
    color: #3a3a3a; 
 
    display: table; 
 
    text-align: center; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
.footerContent { 
 
    height: 150px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    left: 0; 
 
    background: #F28724; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="footer"> 
 
    <p class="footer-text"><a href="{{ path('homepage') }}">OneClick</a> 
 
    </p> 
 
</div> 
 

 
<div class="footerContent"> 
 
    <p>Contact ... 
 
    <p> 
 
</div>

來源

2016-09-01 13:28:38 matthiasunt

thx，它的作品像一個魅力 –

THX，它的工作原理乍一看是一種魅力，但當你滾動一下時，它會出現一些錯誤，也許我可以修復它們，不太確定，我會嘗試 –

播放一下，讓我知道！ – matthiasunt

分配絕對位置頁腳和底部：0;

來源

2016-09-01 12:58:10 yaqi

頁腳應該保持粘性頁腳，所以當頁面內容太多時，我必須滾動。頁腳始終是圖片中的小圖片，當我到達頁面底部時，頁腳會進一步滾動，並且Impressum內容會顯示 PS：如果它本來就是這樣一個簡單的修復方法，我只是想出了它我的自我 –

它應該是一個評論 –

Inzimam，恐怕我不知道你想說什麼你的聲明 –

你可以試試這個解決方案，它使用CSS的calc功能（閱讀更多：http://www.w3schools.com/cssref/func_calc.asp），然而，這個報道不支持IE8，我認爲Chrome將運行得很好

HTML：

<header> 
    <h1>Header</h1> 
</header> 

<main> 
    <content> 
    <p>content</p> 
    </content> 

    <footer> 
    <p>Footer</p> 
    </footer> 
</main>

CSS：

html, 
body { 
    margin:0; 
    padding:0; 
    min-height:100vh; 
} 

header { 
    background: LightSlateGray; 
    height: 100px; 
    line-height: 100px; 
    padding: 0 10px; 
} 
header h1 { margin: 0; } 

main { height: auto; min-height: calc(100vh - 100px); } 
content, footer { display: inline-block; width: 100%; } 

content { height: auto; min-height: calc(100vh - 200px); background:lightblue; } 
footer { 
    height:100px;   /* Height of the footer */ 
    background:#6cf; 
}

演示：https://jsfiddle.net/89ucrec5/4/

來源

2016-09-01 13:19:46

thx，我會看看它 –

粘滯頁腳，延伸到網站底部並進一步滾動時

回答

相關問題