2014-02-22 63 views
0

我已經閱讀了一些其他答案,但仍然無法獲得正確的設置。Bootstrap Affix底部不滾動備份

columsheader不會再次開始向上滾動。

這裏是我的PHP:

<div id="columnsHeader" class="affix" data-offset-top="800" data-offset-bottom="400" data-spy="affix"> 

這裏是我的CSS

.itemList { 
position: relative; 
} 

.extrafieldscolumnsHeader { 
position: absolute; 
top: -25px; 
width: 818px; 
color:white; 
min-height: 28px; 
padding-top: 5px; 
padding-left:8px; 
} 

#columnsHeader.affix { 
border-top: 40px solid #FFFFFF; 
position: fixed; 
top: 43px; 
width: 818px; 
} 

#columnsHeader.affix-bottom { 
position: absolute; /* Start scrolling again. */ 
top: auto; /* Override the top position above. */ 
bottom: 55px; /* It should stop near the bottom of its parent. */ 
} 

這裏是臨時網址

http://108.163.203.210/~goodwin/xjoomla/index.php?option=com_k2&view=itemlist&layout=category&task=category&id=12&Itemid=143 
+0

什麼你的意思是?我檢查了鏈接,我不知道什麼是錯的。也許我不明白這個問題。 –

+0

@AdrianEnriquez感謝您瀏覽它。一直向下滾動,並確保您的瀏覽器高度足夠短以觸發底部粘貼。當您向後滾動時,標題欄不會向上滾動。 – modernmagic

+0

它仍然陷在粘貼底部, – modernmagic

回答

0

我想這可能工作對於你和你只需要設置的<BODY>對於您的頁腳......

HTML:

<footer> 
    <button class="filter">filter &#9654;</button> 
    <button class="wgit">wGit &#9654;</button> 
</footer> 

CSS:

body > footer { 
    width: 100%; 
    position: fixed; 
    background-color: #ffffff; 
    bottom: 0px; 
    right: 0px; 
    height: 40px; 
    border-top: 1px solid #000000; 
} 
body > footer > button{ 
    font-size: 16px; 
    float: right; 
    margin:5px 15px 5px 10px; 
    width: 80px; 
    padding: 3px; 
    border: 1px solid #c3c3c3; 
    border-radius: 5px; 
} 
body > footer > button:hover{ 
    color: #000000; 
    box-shadow: 0px 0px 10px #c3c3c3 inset; 
} 
.filter-child { 
    display: none; 
    background-color: #ffffff; 
    position: fixed; 
    right:15px; 
    bottom:50px; 
    padding:5px; 
    border: 1px dashed #c3c3c3; 
    border-radius: 10px; 
} 
.filter-child li{ 
    list-style: none; 
    padding: 5px; 
    text-align: center; 
    background-color: #f3f3f3; 
    margin: 2px; 
    border: 1px solid #c3c3c3; 
    border-radius: 5px; 
} 
.filter-child li:hover{ 
    box-shadow: 0px 0px 5px #3a3a3a inset; 
} 
.filter-child a{ 
    color: #000000; 
} 

,你可以按照這個鏈接也... http://www.cssstickyfooter.com/ http://css-tricks.com/snippets/css/sticky-footer/

+0

Tirthrajsinth,謝謝,但我不需要粘腳。 – modernmagic