I made a header navigation and it's halfway down the page. When you scroll, and it's on the top of the page I want it to stick, if you know what I mean.
I hope someone can tell me how I get this done. Demo JsFiddle
HTML
<header>menu</header>
CSS
body, html {
height: 2000px;
}
header {
position: absolute;
top: 300px;
background-color: black;
color: white;
width: 100%;
}
You are going to need some JavaScript.
Demo JsFiddle
HTML
<header>
<div class="logo">AWESOME HEADER!</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content">
<!-- your stuff -->
</div>
CSS
* { margin:0; padding:0; }
.logo {
font-size:40px;
font-weight:bold;
color:#a00;
font-style:italic;
}
.menu {
background:#a00;
color:#fff;
height:30px;
line-height:30px;
letter-spacing:1px;
width:100%;
}
.content { margin-top:10px; }
/* the trick */
.menu-padding { padding-top:40px; }
.sticky {
position:fixed;
top:0;
}
Javascript (JQuery)
$(document).ready(function () {
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Take a look at this tutorial. It explains how to do it using either CSS or jQuery depending on what you want.
http://www.hongkiat.com/blog/css-sticky-position/
Related
I am trying to make a webapp what has a 3 sections.
1 - A search bar.
2 - a navigation menu.
3 - The main content.
Ideally how I want it work is when the main content is scrolled down the search bar scrolls up out of site and the navigation goes to the top with the main content scrolling behind everything. But when scrolled up by any amount both the search bar and navigation scroll smoothly back to starting position and the main content remains where it is currently scrolled to.
I have tried it with sticky positioning and using jquery to detect scroll up and down but it all goes a little wierd. I also tried checking scroll just on main element and moving the other 2 accordingly but it was very jumpy, I hope I have explained it clearly.
The code is :
body {
margin:0;
padding:0;
min-height:200vh;
border:2px solid;
}.
search {
height:50px;
background:red;
position:sticky;
top:-50px;
transition: all .2s ease-in-out;
}
.navbar {
height:50px;
background:blue;
position:sticky;
top:0px;
transition: all .2s ease-in-out;
}
.main {
height:100vh;
background:green;
position:sticky;
top:50px;
transition: all .2s ease-in-out;
}
<script src="https://code.jquery.com/jquery.js"></script>
<div id="search" class="search"></div>
<div id="navbar" class="navbar"></div>
<div id="main" class="main"></div>
Now when ran in a browser all 3 elements show but not in example?
I have tried adding this JS but no good? This is driving me mad as I am sure it is quite simple but I just can not figure it out, any help or advice would be greatly appreciated.
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
console.log('scrollDown');
document.getElementById("navbar").style.top = "0px";
document.getElementById("navbar").style.position = "sticky";
} else {
console.log('scrollUp');
document.getElementById("navbar").style.top = "50px";
document.getElementById("navbar").style.position = "fixed";
}
position = scroll;
});
Is it ok to add 1 - A search bar. 2 - a navigation menu in one div? I tried with adding these two elements in one div.
Also note that if you add CSS on search bar the height of navbar will be changed. So update that height in JS.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-80px";
}
prevScrollpos = currentScrollPos;
}
body {
margin: 0;
background-color: #f1f1f1;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display: block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
<div id="navbar">
<div class="search">
<form>
<input type="serch">
<input type="submit" vlaue="search"></button>
</form>
</div>
<div class="navbar-links">
Home
News
Contact
</div>
</div>
<div style="padding:15px 15px 1500px;font-size:30px;margin-top:30px;">
<p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
</div>
in the example below how to keep gotop inside story - i.e. bottom right of the middle div
and keep its show/hide functionality
the three divs - top, story and footer - are not of predictive width and height
I tried various position and margin params - without success
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:fixed;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
Use sticky position:
$(document).on('scroll', function() {
let x = $(this).scrollTop();
if (x > 25) {
$('.gotop').show();
} else {
$('.gotop').hide()
}
});
$('.gotop').on('click', function() {
$(document).scrollTop(0);
});
.container {
width: 50%;
margin: 0 auto;
background: silver;
text-align: center;
}
.top {
padding: 25px;
background: gold;
}
.story {
position: relative;
padding: 25px;
min-height: 150vh;
/* I need flexbox to push the button to bottom*/
display:flex;
flex-direction:column;
}
.footer {
padding: 25px;
background: gold;
}
.gotop {
display: none;
position: sticky;
margin-top:auto; /* push to bottom */
text-align:right; /* right align */
z-index: 99;
right: 14px;
bottom: 14px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
In the following implementation, I have taken some liberty to change minor css , replace jquery with js by introducing Intersection Observer which will only make the gotop element visible when our footer starts getting visible. Ofcourse you can use both jquery and js simultaneously but since I don't have experience with former, I used js only.
The benefit is that it's not dependent on any hardcoded values to control gotop visibility.
let footer = document.querySelector('.footer');
let gotop = document.querySelector('.gotop');
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
gotop.style.opacity = '1';
gotop.style.pointerEvents = 'auto';
}
else{
gotop.style.opacity = '0';
gotop.style.pointerEvents = 'none';
}
})
})
observer.observe(footer);
gotop.addEventListener('click',()=>window.scrollTo({top:true}));
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
opacity:0;
pointer-events:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
transition:all 0.2s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
You only need to change position:fixed; to position:absolute; for your .gotop div. Since it is positioned inside a position: relative div then it will be inside of it.
$(document).on('scroll', function(){
let x = $(this).scrollTop();
if(x > 25){$('.gotop').show();}
else{$('.gotop').hide()}
});
$('.gotop').on('click', function(){
$(document).scrollTop(0);
});
.container{
width:50%;
margin:0 auto;
background:silver;
text-align:center;
}
.top{padding:25px; background:gold;}
.story{
position:relative;
padding:25px;
min-height:100vh;
}
.footer{padding:25px; background:gold;}
.gotop{
display:none;
position:absolute;
z-index:99;
right:14px;
bottom:0;
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='container'>
<div class='top'>TOP</div>
<div class='story'><br><br><br><br>STORY<br><br><br>
<div class='gotop'>gotop</div>
</div>
<div class='footer'>FOOTER</div>
</div>
I'm trying to figure out how to set some section headings to remain fixed, but then scroll up with the page when the user reaches the next heading. Example: http://www.codeandtheory.com/about-us.
My markup:
<div class="section-title"><div class="section-bar"></div>
<p class="section-title">Collections Management</p>
</div>
My CSS:
.section-title {
width: 270px;
font-size: 30px;
line-height: 38px;
color: #f18a21;
text-transform: uppercase;
position: fixed;
float: left;
display: block;
}
Test link: http://api.mtscollective.com
Can this be done in pure CSS, or is JS required?
Thanks!
Js is required!
try this to the same
jQuery
<script>
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.section-title').addClass('fixed');
} else {
$('.section-title').removeClass('fixed');
}
});
</script>
and CSS:
.fixed {position:fixed; top:0; left:0;}
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}
Good day! The following layout which I will post almost works. Almost. A part of the page is being dynamically loaded. If it loads few elements (0/1/2/3) It is alright. If it is more, the footer of the page isn't pushed back. (which basically is the error). I am posting the entire source code. It is configured to work nicely. To see the error itself simply change the value of the
CHANGEME variable to something larger than 3.
The source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LayoutTest</title>
<style>
body {
margin: 0;
padding: 0;
}
.webbody {
margin: 0 auto;
padding:0;
width:900px;
height:200px;
max-height:2000px;
}
.topHeader {
width:900px;
height:50px;
margin: 0 auto;
padding:0;
background:purple;
}
.dynamic {
width:650px;
height:400px;
float:left;
}
.sidebar {
margin-left:50px;
width:150px;
height:400px;
float:left;
background:red;
}
.footer1 {
float:left;
margin: 0 auto;
padding:0;
width:900px;
height:20px;
background:lime;
}
</style>
</head>
<body>
<div class="webbody">
<div class="topHeader"></div>
<div id="main1" class="dynamic"></div>
<div class="sidebar"></div>
<div class="footer1"></div>
</div>
</body>
</html>
<script>
//this function only loads the dynamic part of the page
function load() {
var main = document.getElementById("main1");
var CHANGEME = 2;
for (var i = 0; i < CHANGEME; i++) {
var slot = document.createElement("div");
slot.className = "slot";
main.appendChild(slot);
}
}
load();
</script>
A working example is in this jsfiddle. Basically I have added the following CSS:
#main1 { height: auto; }
I have also added a border around the slot class so you can see what is happening. height: auto is described here