Question

我正在尝试将响应式粘性页脚放在全屏幻灯片上。对于粘性页脚，我使用此解决方案（Javascript和CSS解决方案）Sticky footer link。幻灯片是一个Javascript幻灯片。但我无法使用粘性页脚来处理幻灯片。一旦我删除了幻灯片，粘性页脚就可以了！我不确定这里发生了什么，但我认为它必须对页脚的绝对定位做些什么。这是问题的实时链接link with the problem有没有办法让粘性页脚工作？这是我的CSS和HTML ......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta charset="utf-8">
    <meta content="by RT." name="author">
    <meta content="Copyright &copy; 2014 rajeevthomas.com" name="Copyright">
    <link href="/root//favicon.ico" rel="icon" type="image/x-icon">
    <title>Home Page title</title>
    <meta content="Photographer Website" name="keywords">
    <meta content="Home Page Description" name="description">
    <link href="/styles.css" rel="stylesheet" type=
    "text/css">
    <script src="/jquery-2.1.4.min.js" type=
    "text/javascript">
    </script>
    <script src="jquery-bgstretcher-3.3.1.min.js" type=
    "text/javascript">
    </script>
    <style>


    .bgstretcher-area {
text-align: left;
height:100%;
}
.bgstretcher-page {height:100%;}
.bgstretcher-container{height:100%;}

.bgstretcher {
background: black;
overflow: hidden;
width: 100%;
position: fixed;
z-index: 1;
height:100%;
}
.bgstretcher,
.bgstretcher ul,
.bgstretcher li {
left: 0;
top: 0;
height:100%;
}
.bgstretcher ul,
.bgstretcher li {
position: absolute;
}
.bgstretcher ul,
.bgstretcher li {
margin: 0;
padding: 0;
list-style: none;
}
/*  Compatibility with old browsers  */
.bgstretcher {
_position: absolute;
}
.bgs-description-pane {
display: block;
background: rgba(0, 0, 0, 0.7);
position: relative;
z-index: 10000;
padding: 15px;
color: #ffffff;
font-size: 14px;
}

.footer{
margin: 0 auto;
text-align:center;  
clear:both;
position: absolute;
width: 100%;
bottom:0;
height:10%;
color:#FFF;
}


/* NAV */
header {
background-color: rgba(29, 11, 9, 0.6);
border-radius:0px;
padding-top:.5rem;
padding-bottom:.25rem;
box-shadow: 0 0 26px rgba(0, 0, 0, 0); 
}

.nav {
width:100%;
text-align:center;
list-style:none;
position:relative;
z-index:10;
margin-top:0.35rem;

}

.nav li  {
padding:0px 0px;
text-decoration:none;
font-size:.85rem;
text-align:left;
position:relative;
display:inline-block;
margin-left:2rem;
}

.nav > li:hover > a{
background-color : #5c331a;
}

.nav li a:hover {
color:#FFF;
}

.submenu > li:hover > a{
background-color : #5c331a;
}

.nav li a {


font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#a86b4b!important;

}    

p{color:#FFF;}    
    </style>
</head>
<body>
    <div class="container">
        <header>
            <nav>
                <ul class="nav">
                    <li>
                        <a href="/root/">HOME</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/root/photos">MY GALLERIES</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/search">SEARCH</a>
                    </li>
                    <li>&nbsp;&nbsp;<a href="/about-me">ABOUT ME</a>
                    </li>

                </ul>
            </nav>
        </header>
        <article>
            <section>
                <div class="intro">
                    <p>Welcome to my gallery!</p>
                    <div class="underline"></div>
                </div>
            </section>
        </article>
        <script type="text/javascript">
        jQuery(function($){
        $("body").bgStretcher({
        images: ["1-1.jpg", "2-1.jpg"], 
        imageWidth: 1024,
        imageHeight: 768
        }); 
        }); 
        </script>
        <div class="push"></div>
        <div class="footer">
            <div id="seeker">
                <form accept-charset="utf-8" action="/root/photos/search" id=
                "PhotoCmspageForm" method="get" name="PhotoCmspageForm">
                    <input id="search" name="search" type="text" value=
                    ""><input id="find" type="submit" value="Search">
                </form>
            </div>
            <p class="footnote">Copyright &copy; 2015 rajeevthomas.com</p>
        </div>
    </div>
    <script>
    $('a').each(function() {
    if ($(this).attr('href') != '#' && $(this).attr('href') != ''&& $(this).attr('href') != '/' && $(this).attr('href').indexOf('?') < 0) {
    $(this).attr('href', $(this).attr('href') + '/');
    }
    });
    </script> 
    <script>
    var bumpIt = function() {
    $('body').css('margin-bottom', $('.footer').height());
    },
    didResize = false;
    bumpIt();
    $(window).resize(function() {
    didResize = true;
    });
    setInterval(function() {
    if(didResize) {
    didResize = false;
    bumpIt();
    }
    }, 250);
    </script>
</body>
</html>

响应粘性页脚不能在全屏幻灯片上工作

0 个答案: