Can anyone tell me how to implement the scroll 'sidebar' follows the users scrolling the page, but stops when it reached the 'footer'
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>
Div 'section' doesn't have a set height meaning it grows whenever the div with an id of hello grows. This means that neither the 'hello' nor 'section' has a set height
Div 'section' has a width of 728 and 'hello' has a width of 400. 'sidebar' has a width of 200.
What I want to happen is (using jquery) when the person scrolls just a little past the sidebar then the sidebar should scroll with the page. Hoever the sidebar should not overlap with the footer.
Therefore sidebar should only scroll along with the page till the end of the div section.
The red block (on my website) is the sidebar that want to scroll.
Something like the following should get you started (Tested CHROME only): http://jsfiddle.net/MyFB9/3/
JS
var $sb = $('#sidebar');
var $foot = $('#footer');
var footerTop = $foot.offset().top;
$foot.html(footerTop);
$(document).scroll(function(){
//+ 100 since the height of the sidebar is 100px
if($(this).scrollTop() + 100 > footerTop){
//when we get close, line up perfectly with the footer
$sb.css({top:footerTop - 100});
}else{
//otherwise scroll with the page
$sb.css({top:$(this).scrollTop()});
}
//Visualy display the position of the bottom edge of the sidebar
$sb.html($sb.offset().top + 100)
});
HTML
<div id="section">
<div id="sidebar"> </div>
<div id="hello"> </div>
</div>
<div id="footer"> </div>
CSS
#section{
vertical-align:top;
}
#sidebar, #hello{
display:inline-block;
position:relative;
vertical-align:top;
top:0px;
left:0px;
}
#sidebar{
height:100px;
width:50px;
background-color:red;
}
#hello{
height:900px;
width:50px;
background-color:green;
}
#footer{
height:450px;
width:100px;
background-color:yellow;
}
Related
I have the following layout:
MENU BAR: zindex:50 - Fixed (content below scrolls under)
Picture: zindex:0 - (HEADER scrolls over)
HEADER: zindex:1 - (scrolls over picture, then under MENU BAR)
MENU BAR 2: zindex:1 - (scrolls over picture, then under MENU BAR)
PAGE BODY: zindex:1 (scrolls over picture, then under MENU BAR)
That's how it currently works but would like get HEADER and MENU BAR 2, to slide up as normal but then stop and become fixed when header reaches MENU BAR.
I don't think it is possible in pure CSS burnt out trying.
html:
<div class="menu_bar"> Links </div>
<div class="picture"> <img src="/xxx/xxx.png"/> </div>
<div class="header"> HOMEPAGE </div>
<div class="menubar2"> Links </div>
CSS:
.menubar {height:30px; width:800px; background:#000; colour:#fff; z-index:50;}
.menubarfixed {position:fixed; height:30px; width:800px; background:#000; colour:#fff; z-index:50;}
.picture {z-index:0; top:0;}
.header {margin-top:40px; height:30px; width:800px; background:#555; colour:#fff; z-index:1;}
.menubar2 {height:30px; width:800px; background:#000; colour:#fff; z-index:1;}
Sorry for my bad english :)
1) Sidebar moves to the right (Start Left position = -270, End position = 0);
2) Header contains logo with position:absolute
How to move the logo div to the right if the sidebar is above the logo?
<div class="logo">
<img src="http://placehold.it/70x70">
</div>
<div class="sidebar">
Menu item 1<br/>
Menu item 2<br/>
Menu item 3<br/>
Menu item 4<br/>
Menu item N<br/>
</div>
.logo {
position:absolute;
left:220px;
z-index:2;
}
.sidebar {
background-color:blue;
height:350px;
width:270px;
position:absolute;
left:-260px;
}
$( document ).ready(function() {
$(".sidebar").click(function() {
$(".sidebar").animate({left: "0px"}, 500);
});
});
https://jsfiddle.net/6ybj4dzn/
Have a look at this simple example I set up:
https://jsfiddle.net/0oon722z/
Only added the following line:
$(".logo").animate({left: $(".sidebar").width()}, 500);
Goldman Sachs has a pretty cool webpage here. What interests me about the page is that when you scroll down, you get a header appearing, which - depending on the section where you're at - has more of its squares turn from white to blue. I was wondering (because I can't seem to find the answer in the code), how exactly they made the scrollbar appear seemingly out of the blue (pun not intended), but also how the squares turn from white to blue depending on where you are on the page.
the most common way to do this is by detecting the position of the scrollbar with javascript. I've used the JQuery library for this demo.
here's some code (merely for illustration purpose!)
$(window).scroll(function (event) {
var numOfButtons = 4;
var scroll = $(window).scrollTop();
var heightContainer = $(".container").height();
console.log('scrollPos', scroll);
if(scroll > heightContainer/ numOfButtons){
$(".header .button:nth-child(2)").addClass('act');
}else{
$(".header .button:nth-child(2)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*2){
$(".header .button:nth-child(3)").addClass('act');
}else{
$(".header .button:nth-child(3)").removeClass('act');
}
if(scroll > (heightContainer/ numOfButtons)*3){
$(".header .button:nth-child(4)").addClass('act');
}else{
$(".header .button:nth-child(4)").removeClass('act');
}
});
.header{
height:50px;
background-color:blue;
color:white;
position:fixed;
top:0;
left:0;
width:100%
}
.button{
display:inline-block;
width:10px;
height:10px;
background-color:white;
border-radius:20px;
}
.button.act{
background-color:red;
}
h1{
margin-top:60px;
}
.container{
height:4000px;
background:url("http://www.planwallpaper.com/static/images/518164-backgrounds.jpg");
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1>Scroll demo</h1>
<div class="header">
<div class="button act"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
</div>
<div class="container"><div id="mydiv"></div>
</div>
</body>
</html>
enter link description here
you can easily achieve an effect like that using jquery waypoints: http://imakewebthings.com/waypoints/guides/getting-started/
the first thing that comes to my mind is adding a class with display:block to the header when a certain section hits the top of the viewport to make it visible and playing with addClass and removeClass with css transitions for the squares.
In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution
Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;
http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.
Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/
I have a small jQuery script to keep the sidebar visible when you scroll down the browser. However, the sidebar can get very long since it will contain filters (dropdowns and checkboxes) so the bottom part gets cut-off.
I'd like to have an effect like on this website:
http://www.lyst.com/
In a way, when the sidebar is long, you are still able to scroll up and down. It will only become fixed when it reaches the bottom/top of the sidebar.
Does anybody know where I can get a script that does this exactly?
Set your CSS and HTML markup in a fashion that you can easy reference the objects you want to avoid collision with. Create conditional statements to compare said references.
Firstly, the working jsFiddle.
The HTML ->
<div class="content">
<div class="main">
Main Content
</div>
<div class="sidebar">
Sidebar
</div>
<div class="footer">
Footer
</div>
</div>
The CSS ->
#content{
position:relative; /* required */
height:2000px;
}
.main{
margin-left:100px;
border:1px solid rgb(120,120,120);
height:1500px;
}
.sidebar{
position:absolute; /* required */
top:25px; /* required -- does NOT need to be this value, however. */
left:5px; /* required -- does NOT need to be this value, however.*/
border:1px solid rgb(8,8,8);
background:rgba(70,70,70,.9);
color:#ecebeb;
width:93px;
}
.footer{
border-top:1px solid #ff0000;
height:498px;
}
The jQuery ->
$(window).scroll(function(){
var dist = $(window).scrollTop();
var sTop = $('.sidebar').position().top;
var mHeight = $('.main').height();
var userDist = 100;
if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
//the sidebar is pinned now. it won't scroll further.
}else if(dist < (mHeight - userDist)){
$('.sidebar').animate({
top: dist + $('.sidebar').height()
}, 0);
}
});