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;}
Related
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.
I'm using Javascript to randomly load one image out of a series each time the window is opened or refreshed. The image represents a background image that takes up nearly half of the viewable window. Again, the image is random everytime.
The div for the image sits above a navigation bar, and for some reason when the image is loaded the li text within the navigation bar disappears (the actual nav bar stays) until the window is resized.
In my code the background image also is siting above the code for the navigation bar as they are positioned relative.
Does anyone have any idea what could be causing what looks like a glitch? The issue is happening in Chrome, Safari, Firefox and IE11/10.
All you have to do is resize the window the slightest to make the nav ul li reappear, however, the navigation menu should not be hidden when the window is loaded, or should you have to resize the window to get the menu items to appear.
Any insight into what could be causing this issue?
http://jsfiddle.net/UavyG/1/
Thanks
Javascript and HTML Code below ----->
<!------------Random Image script start below------------>
<div id="main-image">
<script type="text/javascript">
var images = ['type-writer.jpg', 'quechua3.jpg', 'chicago3.jpg', 'type-writer-books.jpg', 'one-hundred-plus-forty-eight.jpg'];
$('#main-image').css({'background-image': 'url(images/cover-images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="images/cover-images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#main-image');
</script>
</div>
<!------------Random Image script END------------>
<nav class="container">
<div id="mobile-logo"><img src="images/logo-2.svg" width="70px" alt="3Elements Review, a literary journal based in Chicago, Illinois. This is our magazine's logo." border="none" id="mobile-logo"></div>
<ul>
<li class="current" style="background-color:#313131;">CURRENT JOURNAL<span class="sub-nav">Our latest and greatest!</span></li>
<li class="submit" style="background-color:#404040;">SUBMIT<span class="sub-nav">Your writing</span></li>
<li class="guidelines" style="background-color:#505050;">SUBMISSION GUIDELINES<span class="sub-nav">Everything you need to know is here</span></li>
<li class="blog" style="background-color:#4b4b4b;">BLOG<span class="sub-nav">Just a blog</span></li>
<li class="past" style="background-color:#404040;">PAST JOURNALS<span class="sub-nav">Browse our issue archives</span></li>
<li class="about" style="background-color:#313131;">ABOUT 3E<span class="sub-nav">What we're about</span></li>
</ul>
</nav>
-----------CSS------------
nav.container {
position:relative;
top:-5px!important;
width:100%;
height:70px;
background-color:#252525;
z-index:50;
border-bottom:5px solid #ffd09d;
}
nav.container ul {
position:relative;
height:70px;
top:-63px;
margin:0px!important;
padding:0px!important;
text-align:center;
}
nav.container ul li a:hover > span {
color:#ffffff!important;
}
.current, .submit, .guidelines, .blog, .past, .about {
position:relative;
margin-right:-4px;
padding-left:12px;
padding-right:13px;
padding-top:0px;
padding-bottom:1.5px;
top:1px;
left:0px;
font-family:myriad pro, arial, sans-serif;
color:#ffffff;
font-size:1.46em;
text-align:center;
line-height:1.95em;
outline:none;
list-style:none;
display:inline-block;
transition:750ms;
-webkit-transition:750ms;
list-style:none;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:none;
color:#252525;
}
li.current:hover, li.submit:hover, li.guidelines:hover, li.blog:hover, li.past:hover, li.about:hover {
cursor:pointer;
background-color:#beb29a!important;
border-bottom:15px solid #ff6000!important;
transition:100ms;
-webkit-transition:100ms;
}
#main-image img {
position:relative;
top:0px;
width:100%;
height:auto;
margin:0px;
padding:0px;
}
In my code I had another script that controls the toggling/slidedown of a menu item. This menu, as well as the main navigation menu both use the nav property.
In my javascript code I just had to further target my css instead of using nav ul, as not being more precise in the javascript code for my mobile menu, affected my main navigation menu, causing it to be hidden briefly until the window was resized.
So I changed one line of code like so:
<script>
$(function () {
var pull = $('button.open-menu');
menu = $('ul.nav-menu');
menuHeight = menu.height();
menu.slideToggle(0);
$(pull).on('click', function (e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function () {
var w = $(window).width();
if (w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
from this: menu = $('nav ul');
to this: menu = $('ul.nav-menu');
I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)
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;
}