scroll content between divs.

Andy · July 22, 2016, 3:04pm

Hi all,
I have a scroll div which holds some links and these are held within a sidebar div:

[code]

Lorem Ipsum

Link 1
Link 2
Link 3
Link 4
Link 5

[/code]

As a user scrolls up/down I want the scroll div and links to move between two points, divs (leftM and leftp).

I have tried two things so far and neither is doing what I need:

1st using: position: fixed; top:240px (scrolls but does not stop until the end of footer)
2nd using javascript, placed just inside the closing div of scroll:

<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>

(This causes outer div, sidebar to collapse and does not stop either. I don’t really know JavaScript, so I am not sure what is happening in this example. I have left this example in the code below.)

Can anyone see what I am doing wrong? I am using a liquid layout and have added borders to both the sidebar and scroll divs to make it easier to see. Here is the full code:

HTML

[code]

Scrolling Sidebar

Lorem Ipsum

Link 1
Link 2
Link 3

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.

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.

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.

Duis eleifend metus nibh, vel vulputate est mattis sit amet. In interdum fermentum lorem, in consectetur eros pretium bibendum.

«
1
2
3
4
5
6
7
»

			<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>

Lorem ipsum dolor sit amet Lorem Ipsum 2016

[/code]

CSS

[code]@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: 2px solid #ff0000; background-color: #fff;}
.scroll{position: fixed; height: auto; border: 1px solid #000;}
.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;}[/code]

Thanks for any help, Andy

ErnieAlex · July 22, 2016, 7:10pm

Well, I am not sure what you are asking, but, if you want a scrolling area with two DIV’s inside it, just do that. Place a wrapper DIV around the two and set it to scroll. Then, set the two inside DIV’s to render fully. Then, the inside two DIV’s should scroll…

Is that what you are asking?

Andy · July 23, 2016, 9:50am

Hi ErnieAlex,

Here is an example I just found. This is what I am looking for. http://spoiledmilk.com/demos/sticky-sidebar/

It is different from what I have been trying but it is the effect I am looking for.

I tried implementing the spoiled milk demo too. I get the sidebar div, it looks fine, so no issues with a collapsed sidebar. However, it will not scroll for me. I shall go through my code again, I assume I am doing something wrong with the floats, as I have a liquid layout.

Thanks, Andy.

ErnieAlex · July 23, 2016, 2:39pm

Well, if you look at their sample, they use JQuery. It is placed at the bottom of the page. It is preferred to use JQuery because it attaches to a HTML element. Javascript is run either when called by a button or other element or when it is hit by the browser when the page is loaded. JQuery attaches itself to an element and the browser runs the routine whenever that element is activated. Or, at least that is how I understand it. Therefore, it is better to use JQuery. You end up with better control of the element.

So, I suggest starting off with their sample, strip out parts you do not want and then if not working, post it and we will help. If you want to do it with the code you posted, it would be harder to control the scrolling. Note that if you use their sample page, you need to download it from their site so you get all the parts of it. They use a library and without that it will not function.

Andy · July 27, 2016, 2:49pm

Thanks ErnieAlex, got it working after a bit of work - much smoother / better than JavaScript option I was trying.

ErnieAlex · July 27, 2016, 3:00pm

Andy, well, I prefer not to use Javascript or JQuery if I don’t have to because it is client-side. But, in your posted page, it used it, and for that type of code, it is preferred for some reason. Does not make sense to me. I have been using the Bootstrap library and find it is very nice for layouts, just takes a little studying on how to use their grid system. But, easy after that…

So, I will mark this solved, but, you might want to explain to others how you solved it. (In case some newbie searches for this problem, there will be a solution showing for them to follow…)

Glad you solved it…