0
Ich muss eine Seitenleiste div scrollen und es ist Inhalt (3 Links) vertikal zwischen zwei Punkten. Ich habe Position verwendet: behoben; oben: 100px. Dies funktioniert ziemlich gut, es beginnt 100px unten von der Spitze und scrollt vertikal, wenn ein Benutzer die Seite herunterscrollt. Aber wie bekomme ich es kurz vor der Fußzeile zu stoppen? Bisher habe ich:Inhalt zwischen zwei Punkten scrollen
HTML
<div class="sidebar">
<div class="scroll">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
CSS
.scroll {position: fixed; top: 450px;}
Danke,
Andy ;-)
Okay, ich habe mehr Code hinzugefügt, um ein besseres Bild von dem zu geben, wonach ich suche. Hier ist das JSFiddle: https://jsfiddle.net/mwt4x90d/
Das Javascript sollte vor dem schließenden Bildlauf div der HTML-Datei platziert werden. Wie auch immer, jsfiddle will es ausgesondert haben.
Ich habe es funktioniert, aber ich habe zwei Probleme. Die erste ist die äußere div (Seitenleiste) kollabiert (siehe nur eine Zeile über der Scroll div. Die zweite ist die div ist nicht über die linke Box/Paginierung stoppen egal, welche Figur ich innerhalb der Klammer verwenden. Ich bin mit einem Liquid-Layout so vielleicht das hat einen Effekt.
Wenn jemand sehen kann, was ich falsch mache, wäre es toll, ich weiß nicht JavaScript, also gehe ich nur durch, was Sie hier sagen für jede Hilfe, Andy ;-)
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scrolling Sidebar</title>
<link rel="stylesheet" type="text/css" media="screen" href="mainstyle.css">
</head>
<body>
<div class="headerContents">
<h1>Lorem Ipsum</h1>
</div>
<div class="leftM"></div>
<div class="centerM">
<a class="top"></a>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. </p>
</div>
</aside>
</div>
<div class="rightM"></div>
<div class="sidebar">
<div class="scroll">
<h2>Lorem Ipsum</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<script type="text/javascript>
var footP = 0;
var scroller = document.getElementsByClassName("scroll");
setInterval("if(document.body.scrollTop > (350) && footP == 0){scroller[0].style.position = 'absolute';scroller[0].style.top = document.body.scrollTop + 450;footP = 1;};",1);
setInterval("if(document.body.scrollTop <= (350) && footP == 1){scroller[0].style.position = 'fixed';scroller[0].style.top = 450;footP = 0;};",1);
</script>
</div>
</div>
<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.<p>
<p>Duis urna sapien, tristique non leo non, ultricies iaculis nibh. Sed posuere quis eros vitae vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas auctor sollicitudin condimentum. Pellentesque ipsum lacus, convallis sed nunc et, porta lacinia lectus. Nam vitae ante erat. Etiam elementum velit quis neque vehicula, quis blandit quam pulvinar. Vestibulum mollis pretium tortor porttitor accumsan. Proin nec semper nulla. Praesent mi augue, placerat vitae auctor vel, lobortis eget dolor. Donec eget mi augue. Maecenas eu augue cursus, maximus nisi eleifend, tempor lacus. Curabitur quis dolor vel urna venenatis pellentesque a nec est. Duis sit amet tempus dui. Integer egestas luctus efficitur. Etiam efficitur orci et ullamcorper pulvinar.<p>
Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. Curabitur turpis diam, molestie nec accumsan sed, scelerisque nec orci. Cras lobortis rutrum sem, vel viverra magna scelerisque ac. Phasellus convallis nunc quis consectetur congue. In vestibulum erat non tellus aliquam sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis rutrum augue, in faucibus nisi. Nulla bibendum ut massa vel eleifend. In nec ligula eget nisi ultricies eleifend. Aliquam ac finibus enim. Maecenas at lacus dictum, porta neque non, suscipit ex. Aenean sem nisl, pellentesque vel leo eget, volutpat condimentum odio. Curabitur sed dui nulla.
</div>
<div class="leftp">Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum. </div>
<div class="pag snippetspag">
<ul class="pagination">
<li><a href="javascript:history.go(-1)">«</a></li>
<li><a class="active" href="../page1.php">1</a></li>
<li><a href="page2.php">2</a></li>
<li><a href="page3.php">3</a></li>
<li><a href="page4.php">4</a></li>
<li><a href="page5.php">5</a></li>
<li><a href="page6.php">6</a></li>
<li><a href="page7.php">7</a></li>
<li><a href="javascript:history.go(1)">»</a></li>
</ul>
</div>
</div>
<div class="footer">
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
<aside>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu euismod nisl, ac dignissim libero. Aenean gravida justo in nunc blandit ultrices. Aenean risus arcu, tristique id tortor nec, suscipit commodo risus. Aenean ac fringilla lorem. Cras eu euismod est, sit amet vulputate turpis. Fusce in felis sed lectus tincidunt posuere. Cras in sapien ut metus tincidunt laoreet eget ac ex. Cras congue nec enim in dictum.</p>
</div>
</aside>
</div>
<div class="copyright">
<p class="copyrightText">Lorem ipsum dolor sit amet <a href="index.php">Lorem Ipsum</a> 2016</p>
</div>
</body>
</html>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
body{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #3f3f3f;
margin: 0;
padding: 0;
color: #000;
background: #f4f3f2;}
h1{font-size: 2.8em; font-weight: 700;}
h2{margin: 0 0 .5em 0; font-size: 1.4em; font-weight: 700; line-height: 1.1em;}
h3{margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700;}
p{margin: 0 0 1em 0;}
.headerContents{background-color: #3f3f3f; padding: 1em 2em; margin-bottom: 2em;}
.leftM, .centerM, .rightM{
float: left;
margin-bottom: 2em;
margin-left: 3%;}
.centerM{background-color: #fff; border: 1px solid #dfdfdf;}
.leftM{width: 9%;}
.centerM{width: 68%;}
.rightM{width: 9%;}
.sidebar,.cards{
float: left;
margin-bottom: 1em;
margin-left: 3%;}
.sidebar {width: 21%; border: 1px solid #dfdfdf; background-color: #fff;}
.scroll{position: fixed; height: 200px;}
.cards {width: 70%;}
.leftp, .pag{
float:left;
margin-bottom: 2em;
margin-left: 3%;}
.leftp{clear: both; width: 21.5%;}
.pag{width: 69.5%; background-color: #fff; border: 1px solid #dfdfdf; padding: 1.5em 0;}
.footer{
clear: both;
padding: 1.5em 1em;
background-color: #3f3f3f;
overflow: hidden;
line-height: 1.5em;
border-top: 5px solid #ff0000;
color: #fff;}
.copyright{clear:both;}
.headerContents h1{font-size: 3em; color: #fff;}
.centerM aside{width: 33%; float: left; text-align: center;}
.centerM .content{
margin: 15px;
background: no-repeat center top;
background-size: 75px 75px;
padding-top: 15px;}
.centerM aside h2{text-decoration:none;}
.centerM aside h2:hover{text-decoration: underline;}
.snippetspag{
text-align: center;}
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;}
ul.pagination li {display: inline;}
ul.pagination li a {
color: #3f3f3f;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;}
ul.pagination li a:hover {
color: #ff0000;}
ul.pagination li a.active {
background-color: #ff0000;
color: #fff;
font-weight: bold;
border-radius: 5px;}
.footer aside .content{
margin: 0 auto;
width: 22%;
float: left;
text-align: left;
margin-left: 3%;}
.footer a:link, a:visited{color: #99cc00; text-decoration: none;}
.footer a:hover, a:active{color: #cc9900;}
.copyright{
text-align: center;
background-color: #3f3f3f;
padding: 1%;
border-bottom: 5px solid #ff0000;}
.copyrightText{font-size:0.9em; color: #fff;}
.copyrightText a:link, a:visited{color: #99cc00; text-decoration: none;}
.copyrightText a:hover, a:active{color: #cc9900;}
werfen Sie einen Blick auf http://leafo.net/sticky-kit/ –
oder teilen Sie mehr Code –
@CommercialSuicide, Sie meinen, _write_ mehr Code? Ich bezweifle, dass er mehr hat. – TricksfortheWeb