【发布时间】：2020-01-02 23:05:48
【问题描述】：
好的，所以我有一个元素应该位于页面底部。问题是，在某些页面上，我的元素会根据 click() 函数向下和向上滑动。 当页面加载时，元素自然位于底部，因为页面有足够的内容将其向下推。
当用户点击一个使兄弟元素向上滑动的元素并因此使该元素随之向上滑动直到它到达下一个“可见”元素时，这会变得很棘手。
如果没有太多内容，我或多或少想要做的是将它保持在屏幕底部，并且当有足够的可见内容时，它只会相对于它上面的兄弟定位自己。希望有意义
这是页脚
<footer>
<div class='container'>
<span>
<h2><b>Contact</b></h2>
<b>Telephone:</b> +45 000000<br/>
<b>Email:</b> management@EXAMPLE.com
</span>
<span>
<h2><b>FAQ</b></h2>
Some text<br/>
Some other text
</span>
<span>
<h2><b>Some header</b></h2>
<?php
if(date('Y') == '2019'){
echo 'example © 2019';
} else {
echo 'example © 2019-'.date('Y');
}
?>
</span>
</div>
</footer>
--- CSS ---
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
footer
{
color: #FFF;
background: #d99741;
padding: 20px;
margin-top: 20px;
}
footer span
{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
footer h2
{
position: relative;
margin-top: -10px;
}
--- 上面兄弟的 Html ---
echo "
<section id='displayevents'>
<div class='container'>
<div class='eventCountry'>
<p>".$trim."</p>
</div>
<div class='framework''>
<div class='imageFrames'>
<img src='".$image[0]."' />
<h3>".$club[0]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[1]."' />
<h3>".$club[1]."</h3>
</div>
<div class='imageFrames'>
<img src='".$image[2]."' />
<h3>".$club[2]."</h3>
</div>
</div>
</div>
</section>
";
--- 上下滑动的javascript ---
<script type='text/javascript'>
$(document).ready(function(){
//Hides all .framework and then shows the first
var getamount = $('.framework');
for(var x=0;x<=getamount.length;x++){
$(getamount[x]).hide();
}
$('.framework').first().show();
//Creates a function that will handle the display of each .framework. Only
one at a time.
function openSection(element){
var display = element.css('display');
var find = $('.framework');
var getAttr;
if(display != 'none'){
$(element).slideUp(500);
} else{
for(var x=0;x<=find.length;x++){
getAttr = $(find[x]).css('display');
if(getAttr != 'none'){
$(find[x]).slideUp(500);
}
}
$(element).slideDown(500);
}
}
//Create clickfunction to .eventCountry and call function to hide/show
content
$('.eventCountry').click(function(){
openSection($(this).next());
});
});
</script>
【问题讨论】：