Question

目前我的网站有一个固定的标题和无限滚动。但是，只要我引入固定页脚，无限滚动就会关闭并转向页面导航。是否有可能拥有这三个？

我尝试了在线提供的各种粘性页脚，并将此网站用于解决方案。他们都工作 - 直到我滚动然后它突然消失。下面的代码是目前唯一一个保持不变的代码。

提前道歉 - 我正在努力学习。所有反馈都非常赞赏。

另外，我做了JSfiddle

-

对于固定页脚，我使用了 -

<div class="row">
<div class="column grid_12">
<div id="wrap">
<div id="footer" class="footer">
    APPLY </div>

这对于css -

.footer {
 clear: both;
position: fixed;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.3;
height: 35px;
overflow: hidden;
display: block;
bottom: 0;
width: 100%; 
}
.footer ul{
margin:0;
padding:0;
list-style:none;
text-align:center;
} 

.footer ul li {
margin:0 5px;
display:inline-block;
}

.footer ul li a{
padding:10px;
background:#555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

 .footer ul li a:hover{
  background:#888;
   }

这适用于JS -

   var footerHeight = 0,
    footerTop = 0,
    $footer = $("#footer");
positionFooter();

function positionFooter() {

    footerHeight = $footer.outerHeight(); // changed
    footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px";

    if (($(document.body).height() + footerHeight) < $(window).height()) {
        $footer.css({
            position: "absolute"
        }).animate({
            top: footerTop
        }, -1)
    } else {
        $footer.css({
            position: "static"
        })
    }
}

$(window).scroll(positionFooter).resize(positionFooter)

});

固定页眉，页脚和无限滚动：这可能吗？

0 个答案: