Im trying to make a Webpage with a banner so that when you scroll the content comes from the bottom and keeps sticking right under the upper half of the banner.
I immediately came up with the easy and ugly idea, that the content-box would have the size of the screen, a big margin-top and overflow-y: scrolling, but as I said...it would be the ugly way.
Thus my main problem is to achieve this and still have one single scroll-bar. I think the header has to be position: fixed...has anyone an css / more mobile friendly idea?
EDIT:
As requested a JSFiddle to play with: http://jsfiddle.net/r2gbyjcs/
Before we begin
Note that there is no such thing as "fancy" or "unfancy" in coding. In fact, if I were to define "fancy", I'd describe it as "unnecessary." Because if all you want is to achieve the same result but put in a rube goldberg amount of effort, that's just wasting your time. Your goal is to create the fastest and smoothest implementation, not put fancy code behind the veil.
Solution
The solution is to divide the header into 2 divs: Top and Bottom. Make them have same background to be indistinguishable, but make the top have z-index: 0 while the bottom has z-index: -1. Then, split the height between the top and bottom and then adjust the margin-top of the content.
HTML:
<header>
<div id="top">Hotel</div>
<div id="bottom">Bottom half</div>
</header>
<div id="content">
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS:
body {
margin: 0px;
}
header #top{
height: 100px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
}
#content {
background-color: #e0ecf3;
padding: 20px;
margin-top: 200px;
}
header #bottom{
height: 200px;
background-color: #fb3f26;
position: fixed;
z-index: -1;
top: 0px;
left:0px;
right: 0px;
}
JSFiddle Demonstration
You could make the header position:absolute so it is fixed in place and taken out of the layout flow. Then add padding-top to the content box to compensate for the height of the header.
I would suggest something like this, but it's not the fanciest way:
HTML
<header id="header1">
<div>Hotel</div>
</header>
<header id="header2">
</header>
<div id="content">
...
CSS
#header1 {
height: 25px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: 1;
}
#header2 {
height: 300px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: -1;
min-height: 25px;
}
I think an easy way would be to just use position:fixed for the header/banner. Then edit the z-index so the banner is behind the content box and the header is above the content box. You can use margin-top to offset the height of the header/banner.
http://jsfiddle.net/haydensmack/r2gbyjcs/6/
Related
When an (x) amount of images are located next to (x) different paragraphs, how do I change the image when to a different image entirely when hovering over different paragraphs, as seen on dart.dev by google?
Depending on exactly what the use case is, you can do this without Javascript.
In this snippet the paragraphs and the space for the image are within the same container and then when hovering over a paragraph its associated image is shown as a background image to its before pseudo element which is positioned at the (communal) image position.
body {
overflow-y: hidden;
}
.container {
position: relative;
width: 100%;
}
.container .image, .container p:hover::before {
width: 45%;
height: 100%;
}
.container .image {
display: inline-block;
}
.container div.pwrapper {
width: 45%;
height: 100vh;
display: inline-block;
overflow-y: auto;
}
.container p:hover::before {
position: absolute;
top: 0;
left: 0;
content: '';
background-image: var(--bg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat no-repeat;
}
.container p:nth-child(1) {
--bg: url(https://picsum.photos/id/1015/1024/384.jpg);
}
.container p:nth-child(2) {
--bg: url(https://picsum.photos/id/1016/1024/384.jpg);
}
.container p:nth-child(3):hover {
--bg: url(https://picsum.photos/id/1018/1024/384.jpg);
}
.container p:nth-child(4) {
--bg: url(https://picsum.photos/id/1019/1024/384.jpg);
}
.container p:nth-child(5) {
--bg: url(https://picsum.photos/id/1024/1024/384.jpg);
}
<div class="container">
<div class="image"></div>
<div class="pwrapper">
<p>First paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Second paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Third paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Fourth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Fifth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is indeed done using javascript as evidenced by it not working when you turn off javascript. What you'll want to do is have an img tag and use the javascript mouseover event. You could do something like this:
let img = document.getElementById("img-1");
let link1 = document.getElementById("link-1");
link1.addEventListener('mouseover', () => img.src = 'img1.png');
let link2 = document.getElementById("link-2");
link2.addEventListener('mouseover', () => img.src = 'img2.png');
... (Might want to use a loop)
I want the following object to have position fixed, but it has to be located 800 px aprox from top margin below the slideshow, this means outside my screen size.I was told it can be made with jquery- toogle class but can t manage to do it myself - Thanks so much for your help!
http://vtwg.eu/ZMT/untitled3.html (website where element is not showing up)
Victoria
<div id="book-now">
<a href="mailto:musictours#zzkrecords.com?subject=Music_Tours"><img
src="book_now.png" alt="" width="90"></img></a>
</div>
#book-now{
position: fixed;
top: 800px;
right: 100px;
width: 160px;
height: 120px;
text-align: right;
}
Basically, you need to measure scrollTop(); and if it goes beyond a certain value (in your case, 800px, in this example - 300px) then give it a fixed position in your id of #book-now
Check it out below:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$(".fixed-header").addClass("fixedPos");
}
else{
$(".fixed-header").removeClass("fixedPos");
}
});
.fixed-header {
background-color: #fff;
width: 100%;
position: absolute;
top: 300px;
left: 0;
}
/*the fixed snippet, triggered by js*/
.fixedPos{
position: fixed;
left: 0;
right: 0;
width: 100%;
z-index: 100;
top: 0;
}
.fixed-header__nav li {
display: inline-block;
list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="fixed-header">
<ul class="fixed-header__nav">
<li>Item 1</li>
<li> Item 2</li>
<li>Item 3</li>
</ul>
</header>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
I assume, you use a normal desktop screen, then its behind your big picture :)
If you add a z-index: 1; it will be above it. Do you realy want it to be always on 800px? On Small devices it never will be within the viewable area.
If you are unfamiliar with JQuery. Try these changes in css;
#header1 {
padding: 20px;
position: relative;
z-index: 100000;
}
.slideshow-container {
max-width: 2000px;
position: relative;
margin: 0px;
z-index: 100000;
}
#book-now{
position: fixed;
top: 550px;
right: 100px;
width: 160px;
height: 120px;
text-align: right;
z-index: 9999;
}
Im working on a menu that is located on the left side of the screen, and with a button that is located on the main content area i hide/show the menu.
When the screen width is less than 768px i hide the menu using css, the problem that im having is that because the menu is already hided, when the user clicks on the button instead of showing the menu it is trying to hide the menu again.
Im having a lot of troubles trying to explain the problem,
Here is the live demo, with all the code of what I have.
The code works fine for desktop, the problem is when the screen is less that 768px.
This is the function tham using to show/hide the menu and to move the content
$('#menu-toggle').click(function(e)
{
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
CSS
.show-hide
{
margin-left: -250px;
}
Full Code Live Demo: https://jsfiddle.net/c7cpLq9m/
Just added this to the media query:
#wrapper .show-hide {
margin-left: 0;
}
$('#menu-toggle, .mobile-trigger').click(function(e) {
e.preventDefault();
$('#sidebar').toggleClass('show-hide');
$('#page-content').toggleClass('show-hide');
});
.container-fluid {}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mobile-trigger{
display: none;
}
#sidebar {
z-index: 1000;
position: fixed;
height: 100%;
width: 250px;
overflow-y: auto;
background: #1b1e24;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-hide {
margin-left: -250px;
}
ul.sidebar-nav {
list-style: none;
padding: 0;
}
ul.sidebar-nav li a {
display: block;
padding: 10px 25px;
color: #8b91a0;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.1em;
}
ul.sidebar-nav li span {
padding-right: 10px;
}
ul.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
#page-content {
transition: 0.5s;
/* position: absolute; */
padding-left: 255px;
/* width:100%;
background: grey;*/
}
#media ( max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#wrapper .show-hide{
margin-left: 0;
}
.mobile-trigger{
display: block;
}
#page-content {
padding-left: 0px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<div id="sidebar">
<ul class="sidebar-nav">
<li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li>
<li class="sidebar-brand"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-user"></span> Contacts</li>
<li><span class="glyphicon glyphicon-picture"></span> Content</li>
<li><span class="glyphicon glyphicon-inbox"></span> Inbound</li>
<li><span class="glyphicon glyphicon-envelope"></span> Outbound</li>
<li><span class="glyphicon glyphicon-globe"></span> Social</li>
<li><span class="glyphicon glyphicon-folder-close"></span> Automation</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Reports</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
<li><span class="glyphicon glyphicon-comment"></span> Feedback</li>
</ul>
</div>
<div id="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Toggle Menu
<h1>Duis aute</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-6">
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Excepteur</h1>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ./wrapper -->
Update:
On mobile is better if you not push the content because it will look very messy. It's better to have the menu over the content and add a button inside the menu to close it. For this I added an extra element inside the menu, added the class mobile-trigger, I've hidden it by default on desktop and showed it on mobile using display: block;. Also added the selector mobile-trigger to the click event.
In lonut's answer its better adding this styles:
#menu-toggle {
position: absolute;
top: 0;
right: 10px;
}
To bring the toggle menu button top right of page.
http://codepen.io/RobbyT15/pen/otyfw/
I'm working on a site design, and I'm trying to make a dynamic footer that stays at the bottom of the window regardless of the screen size. Using the fixed attribute in CSS doesn't work as it doesn't scroll with the page. I've done something similar with a floating div, however, when I tried to incorporate it with the footer, it doesn't work. I've looked around at the other similar questions, but each of them say to add the position: fixed CSS rule. Any suggestions?
Edit* I made the changes everyone suggested, however, The footer it not "attaching itself to the bottom of the window. I'm sorry I'm being such a pain with this.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Robert Thompson</title>
<link rel="stylesheet" href="styles/desktop.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="includes/init.js"></script>
<script type="text/javascript" src="includes/main.js"></script>
</head>
<body>
<div id="main">
<header></header>
<div id="content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<footer></footer>
</div>
</body>
</html>
CSS
body{
position: relative;
margin: 0;
padding: 0;
background-color: #757575;
color: #FFFFFF;
z-index: 0;
}
header, footer{
position: relative;
display: block;
width: 100%;
height: 50px;
background-color: #000000;
z-index: 2;
}
header{
border-bottom: 3px inset #DDAA00;
}
footer{
border-top: 3px outset #DDAA00;
}
#main{
position: absolute;
background-color: red;
z-index: 1;
}
#content{
position: relative;
left: 250px;
width: 70%;
z-index: 1;
}
You would need to use position relative, and absolute. So to your container (the body of the page) add position: relative and then to your footer you would add position: absolute no need for margining. Also look into CSS Sticky Footer as TylerH pointed you too.
Take a look at this: http://codepen.io/sheriffderek/pen/ziGbE
It's a combination of the few sticky footer options out there - and some optional javascript to adjust dynamically depending on the footer's actual content (which might be different at different screen sizes)
I am new to JavaScript and tried a simple code (in pure JavaScript)
I made a code to make an invisible block of text ( display:none; ) to be made visible ( display:block; ) when the user scrolls past a point, say 300px.
Here is my complete code
<!DOCTYPE html>
<html>
<head>
<style>
body{
position: absolute;
}
p{
margin-top: 300px;
margin-left: 50%;
display: none;
}
</style>
<script type="text/javascript">
onscroll = function() {
if (scrollTop > 400) {
getElementById('p').style.cssText ="display:block;";
} else {
if {
getElementById('p').style.cssText ="display:none;";
}
}
};
</script>
</head>
<body>
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
window.onscroll = function() {
if (window.scrollY > 400) {
document.getElementById('p').style.cssText ="display:block;";
} else {
document.getElementById('p').style.cssText ="display:none;";
}};
i have removed empty if block ,it was without condition
scrollTop is not there in DOM API its scrollY
for best cross browser solution ;use jquery scrollTop function
Fiddle demo
JQuery
$(document).scroll(function(){
if($("body").scrollTop()>=200)
{
$("#p2").css("display", "block");
}
})
HTML
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS
body {
position: absolute;
}
p
{
line-height:90px;
background-color:yellow;
}
p#p2 {
display: none;
background-color:orange;
}
Here the 2nd <p> element is by default hidden and when body scrolls down 200 px it comes in display.