Javascript 响应性粘滞页脚无法在全屏幻灯片上工作
我试图在全屏幻灯片上放置一个有响应性的粘性页脚。对于粘性页脚，我使用这个解决方案（Javascript和CSS解决方案）。幻灯片放映是一种Javascript幻灯片放映。但我无法让粘性页脚与幻灯片一起工作。一旦我删除了幻灯片，粘性页脚就可以工作了！。我不确定这里发生了什么，但我确实认为这与页脚的绝对位置有关。这里有一个问题的实时链接，有没有办法让粘性页脚工作？ 这是我的CSS和HTMLJavascript 响应性粘滞页脚无法在全屏幻灯片上工作,javascript,html,css,Javascript,Html,Css,我试图在全屏幻灯片上放置一个有响应性的粘性页脚。对于粘性页脚，我使用这个解决方案（Javascript和CSS解决方案）。幻灯片放映是一种Javascript幻灯片放映。但我无法让粘性页脚与幻灯片一起工作。一旦我删除了幻灯片，粘性页脚就可以工作了！。我不确定这里发生了什么，但我确实认为这与页脚的绝对位置有关。这里有一个问题的实时链接，有没有办法让粘性页脚工作？ 这是我的CSS和HTML <!DOCTYPE html> <html lang="en"> <head&g
<!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 © 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> <a href="/root/photos">MY GALLERIES</a>
</li>
<li> <a href="/search">SEARCH</a>
</li>
<li> <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 © 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>
主页标题
.担架区{
文本对齐：左对齐；
身高：100%；
}
.bgstretcher页{高度：100%；}
.BG拉伸器容器{高度：100%；}
B.担架{
背景：黑色；
溢出：隐藏；
宽度：100%；
位置：固定；
z指数：1；
身高：100%；
}
.担架，
.BGUL担架，
李先生{
左：0；
排名：0；
身高：100%；
}
.BGUL担架，
李先生{
位置：绝对位置；
}
.BGUL担架，
李先生{
保证金：0；
填充：0；
列表样式：无；
}
/*与旧浏览器的兼容性*/
B.担架{
_位置：绝对位置；
}
.bgs说明窗格{
显示：块；
背景：rgba（0,0,0,0.7）；
位置：相对位置；
z指数：10000；
填充：15px；
颜色：#ffffff；
字体大小：14px；
}
.页脚{
保证金：0自动；
文本对齐：居中；
明确：两者皆有；
位置：绝对位置；
宽度：100%；
底部：0；
身高：10%；
颜色：#FFF；
}
/*导航*/
标题{
背景色：rgba（29,11,9,0.6）；
边界半径：0px；
填料顶部：.5rem；
底部填充物：25rem；
盒影：0.26px rgba（0,0,0,0）；
}
.导航{
宽度：100%；
文本对齐：居中；
列表样式：无；
位置：相对位置；
z指数：10；
保证金上限：0.35雷姆；
}
李国荣先生{
填充：0px 0px；
文字装饰：无；
字体大小：.85rem；
文本对齐：左对齐；
位置：相对位置；
显示：内联块；
左边距：2em；
}
.nav>li:悬停>a{
背景色：#5C33A；
}
李娜：悬停{
颜色：#FFF；
}
.子菜单>li:悬停>a{
背景色：#5C33A；
}
李娜先生{
字体系列：“Lucida Sans Unicode”，“Lucida Grande”，无衬线；
颜色：#a86b4b！重要；
}
p{color:#FFF；}
-
-
-
-
欢迎来到我的画廊
jQuery（函数（$）{
$（“身体”）.BG担架({
图片：[“1-1.jpg”，“2-1.jpg”]，
图像宽度：1024，
影像高度：768
});
});
版权和副本；2015 rajeevthomas.com
$（'a'）。每个（函数（）{
if（$（this.attr（'href'）！='#'&&$（this.attr（'href'）！=''&$（this.attr（'href'）！='/'&$（this.attr（'href'））.indexOf（'？'））<0）{
$（this.attr（'href'，$（this.attr（'href'）+'/）；
}
});
var bumpIt=函数（）{
$（'body'）.css（'margin-bottom'，$（'.footer'）.height（））；
},
didResize=false；
bumpIt（）；
$（窗口）。调整大小（函数（）{
didResize=true；
});
setInterval（函数（）{
如果（调整大小）{
didResize=false；
bumpIt（）；
}
}, 250);