Question

好的，所以我有一个应该放在页面底部的元素。问题是在某些页面上，我的元素会根据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 &copy; 2019';
        } else {
           echo 'example &copy; 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>

Answer 1

一种解决方案是在body标签的底部添加填充，然后使用position:absolute;bottom:0将页脚放在创建的空间内。如果知道填充的数量，则可以在CSS中进行定义，否则只需使用一些JS。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
	footer {
		background-color:red;
		position: absolute;
		bottom: 0;
	}
	body {
		/*padding-bottom: 90px; use this if the footer height is known*/
		position: relative;
		min-height: 100vh;
		box-sizing:border-box;
	}
	
	/*for demo*/
	body {
		margin: 0;
	}
	h1 {
		margin: 0;
	}
  </style>
</head>
<body id="body">
<h1>Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>
<button>Slide Togle</button>
<h2 id="slide">Qui officia deserunt mollit anim id est laborum.
Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Itaque earum rerum hic tenetur a sapiente delectus. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
At vero eorunt mollitia. Esse cillum dolore eu fugiat nulla pariatur. Itaque earum rerum hic tenetur a sapiente delectus. Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</h1>

<footer id="footer">At vero eos et accusamus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nihil molestiae consequatur, vel illum qui dolorem eum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum rerum hic tenetur a sapiente delectus. Quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat.
</footer>

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script>
	var h = document.getElementById('footer').scrollHeight;
	document.getElementById('body').style.paddingBottom  = h+'px';
	
	$('button').click(function(){
		$('#slide').slideToggle("slow");
	});
</script>
</body>
</html>

在页面底部将页脚元素放在同级元素之前

1 个答案: