I'm relatively new to js and fighting with floating menu.
This is how my js code look like
$(function(){
console.log('jest');
$(window).scroll(function(event){
console.log($('#menu').offset().top, $(this).scrollTop());
if ($('#menu').offset().top <= $(this).scrollTop()+$(window).height()) {
$('#menu').addClass("fixed");
} else {
$('#menu').removeClass("fixed");
}
});
});
When the top is achieved, fixed class is added properly.
My question is:
What should I do inside fixed class to make the menu stick to the top?
Nice an simple "position: sticky"..
brand {
display: block;
background-color: pink;
padding: 10px;
font-size: 20pt;
}
header {
background-color: yellow;
border: 2px solid black;
padding: 10px;
position: sticky;
top: 0;
}
section {
background-color: silver;
padding: 10px;
}
body {
padding: 0;
margin: 0;
}
<brand>
<div>This is our branding,. It can scroll away.</div>
<small>for all your header needs,.. </small>
</brand>
<header>
This is the header
</header>
<section>
Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br>
Scroll down<br><br><br><br><br><br>
Even further<br><br><br><br><br>
A little bit more<br><br><br><br><br>
Ok I'm bored now.
</section>
<header>
This is repeated, see how the header takes over
</header>
<section>
Our othe stuff can go in here.<br><br><br><br><br><br><br><br><br><br>
Scroll down<br><br><br><br><br><br>
Even further<br><br><br><br><br>
A little bit more<br><br><br><br><br>
Ok I'm bored now.
</section>
.fixed{
position: fixed;
top: 0;
right: 0;
left: 0;
}
Related
I build by research and copy+paste this fixed Headertitle but unfortunately I have a problem after I load the side and scroll up there is a white space where the title jumps into and than back. Can anyone help me removing this Bug?
Its super annoying...and I tried almost everything to remove it.
I want it that my Title is fixed at one point and stays there in the top layer thats why I also put zindex -999
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
body
margin: 0;
font-family: Impact;z-index: 999;
}
.top-container {
position: absolute;
text-align: center;
background: #transparent;
color: #transparent;
z-index: 999;
}
.header {
position: auto;
padding: auto, auto;
text-align: center;
background: #transparent;
color: #transparent;
z-index: 999;
}
.content {
padding: 10px;
z-index: 999;
}
.sticky {
position: fixed;
text-align: center;
top: 0;
z-index: 999;
width: 100%;
}
.sticky + .content {
position: absolute;
padding-top: 0px;
z-index: 999;
}
<div class="header" id="myHeader">
<h2><center>97cm</center></h2>
</div>
Just add your sticky class and get rid of the javascript
<div class="header sticky" id="myHeader">
Explanation:
Your sticky class is set up to "stick" the div to the top of the page, but you don't actually assign this class to your <div>.
Then you have some javascript that checks if you've scrolled down the page and then assigns the .sticky class to your <div>
The white space and "jump" that you're seeing is the delay between you scrolling, and the javascript applying the .sticky class. You always want this </div> to be sticky, so just have the sticky class permanently assigned to it, and remove all the javascript.
I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?
This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
ยป JSBin
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.
Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}
The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
Use the following
footer {
position: absolute;
bottom: 0;
}
try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.
I'm having trouble finding a solution to what I'm trying to accomplish. I am trying to use JS (or additional libraries) to make it so that when the user scrolls down on the mousewheel the page scrolls the opposite way than it normally would.
Basically, I want the bottom of the page to be seen first and as the user scrolls I want the top of the screen to come down into view. The only example I've been able to find is the right column of http://conduit.com/.
I've set up a JSFiddle http://jsfiddle.net/5UUtV/ with an example to help visualize it. I know it might have something to do with:
window.scrolltop();
but honestly, I'm not sure of the best way to go about this.
I want the panel labeled '1' to be seen first, and the rest to come down into view as the user scrolls.
Any ideas on how this could be done would be greatly appreciated.
Thanks
here is the solution - http://jsfiddle.net/5UUtV/1/
JS
var winHeight = $(window).innerHeight();
$(document).ready(function () {
$(".panel").height(winHeight);
$("body").height(winHeight*$(".panel").length);
});
window.addEventListener('resize', function (event) {
$(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
$(".panelCon").css('bottom',$(window).scrollTop()*-1);
});
HTML
<body>
<div class="panelCon">
<div id="pane-5" class="panel">
<h1>5</h1>
</div>
<div id="pane-4"class="panel">
<h1>4</h1>
</div>
<div id="pane-3"class="panel">
<h1>3</h1>
</div>
<div id="pane-2" class="panel">
<h1>2</h1>
</div>
<div id="pane-1" class="panel">
<h1>1</h1>
</div>
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
}
.panelCon{
position: fixed;
bottom: 0;
left:0;
width: 100%;
}
.panel {
width: 100%;
}
.panel h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#pane-1 {
background-color: green;
}
#pane-2 {
background-color: red;
}
#pane-3 {
background-color: white;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}