Responsive Horizontal Scrolling Menu - javascript

http://healthunit.com has a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. I'm trying to mimic that same exact functionality thanks to a site I'm redesigning with a huge level of navigation elements.
Requirements:
Left and right scroll click options
Centered list item option centered in the space
Only one list item visible at a time
Horizontal Scrolling & Responsive
Clicking the last or first option in the list will take you to either the first option or last option in the list
My current html for this section is:
<nav id="sub" class="clearfix">
<ul class="wrapper">
<li>Estimate</li>
<li>About</li>
<li>Customer Information</li>
<li>Financing</li>
<li>Careers</li>
<li>Locate Us</li>
<li>Inspiration</li>
</ul>
</nav>
The CSS currently attached to it is:
nav#sub {
background: #004173;
background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
border-bottom: #00325a solid 3px;
box-shadow: 0 4px 6px 0 #BFBFBF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004173', endColorstr='#014f8d',GradientType=0 );
webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
}
#sub ul {
text-align: center;
}
#sub ul li {
padding: 10px 3.3%;
}
#sub a {
color: #fff;
font-size: 10pt;
font-weight: 400;
text-decoration: none;
}
#sub ul a:hover li {
background: #007FEB;
}

So, finally I think I have what you are looking for:
Fiddle: http://jsfiddle.net/fzXMg/2/
CSS and HTML is in the Fiddle...
JS:
$(function(){
var state = 0;
var maxState = 6;
var winWidth = $(window).width();
$(window).resize(function(){
winWidth = $(window).width();
$('.box,.container_element').width(winWidth-100);
}).trigger('resize');
$('#lefty').click(function(){
if (state==0) {
state = maxState;
} else {
state--;
}
$('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
});
$('#righty').click(function(){
if (state==maxState) {
state = 0;
} else {
state++;
}
$('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
});
});
This uses jQuery again.

Now that the healthunit site has changed the original question is not completely clear.
To make a nav menu that scrolls horizontally uses arrow buttons (instead of scrollbar) can be implemented with a little jQuery and easily converted to pure JavaScript.
var $bar = $('.nav');
var $container = $('#outer');
var widths = {};
var scrollOffset = 0;
var container = document.getElementById("outer");
var bar = document.getElementById("bar");
function setMetrics() {
metrics = {
bar: bar.scrollWidth||0,
container: container.clientWidth||0,
left: parseInt(bar.offsetLeft),
getHidden() {
return (this.bar+this.left)-this.container
}
}
updateArrows();
}
function doSlide(direction){
setMetrics();
var pos = metrics.left;
if (direction==="right") {
amountToScroll = -(Math.abs(pos) + Math.min(metrics.getHidden(), metrics.container));
}
else {
amountToScroll = Math.min(0, (metrics.container + pos));
}
$bar.css("left", amountToScroll);
setTimeout(function(){
setMetrics();
},400)
}
function updateArrows() {
if (metrics.getHidden() === 0) {
$(".toggleRight").addClass("text-light");
}
else {
$(".toggleRight").removeClass("text-light");
}
if (metrics.left === 0) {
$(".toggleLeft").addClass("text-light");
}
else {
$(".toggleLeft").removeClass("text-light");
}
}
function adjust(){
$bar.css("left", 0);
setMetrics();
}
$(".toggleRight").click(function(){
doSlide("right");
});
$(".toggleLeft").click(function(){
doSlide("left");
});
$(window).on("resize",function(){
// reset to left pos 0 on window resize
adjust();
});
setMetrics();
Demo: https://www.codeply.com/go/HgAVBVfQFY

Check out that fiddle: http://jsfiddle.net/zEPQ5/15/
It's not perfect in meaning of design, but it shows off the concept.
I used jQuery with that.
$(function(){
var state = 0;
$('#up').click(function(){
state += 1;
$('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
});
$('#down').click(function(){
state -= 1;
$('ul.wrapper').animate({marginTop:(15-state*35)+'px'},400);
});
});

Check out this jsfiddle: http://jsfiddle.net/7vvdB/
Basically, create an outer container with a max-width of 100% and a overflow-x:scroll, then create an inner container with a fixed width large enough to fit all of your elements, then put all of your elements in the inner container.
.container_element
{ white-space:nowrap
min-width:100%;
overflow-x:scroll;
overflow-y:hide;
}
.inner_container
{
width:5000px;
}
}

Related

How to give an animation to border

I have a div that has a gradient border. So I want to give this div an animation and as soon as it is scrolled to this div, I want border-gradient turn around itself. I have no idea how to do it that's why I am asking it direcly.
<div class="border-gradient">
</div>
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(190deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
}
I was unable to find a css solution for animating the border, it may be achievable using images.
Anyways, here is a javascript solution
var bored = document.getElementsByClassName("border-gradient")[0];
var anim = {'running':0,'deg':0,'time':0};
var animator;
var boredy = bored.getBoundingClientRect().top;//grab the y of the element relative to the top of the web page
checkscroll();//check if element onscreen initially
window.onscroll = checkscroll;//check if element is onscreen when the user scrolls
function checkscroll() {
if(!anim.running && window.scrollY + window.innerHeight >= boredy) {
anim.running = 1; anim.time = 0;//reset the animation, set running to 1 so the animation won't retrigger while already running
startanim();
}
}
function startanim() {
animator = setInterval(function() {
anim.deg += 1;
anim.time += 50;
bored.style = `border-image:linear-gradient(${anim.deg}deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5)); border-image-slice: 1;`;
if(anim.time >= 10000){window.clearInterval(animator); anim.running = 0}
},50);//start a loop that continousouly updates the border
}
Css:
.border-gradient {
height: 230px;
width: 100%;
border: 5px solid transparent;
border-image: linear-gradient(0deg, rgba(205, 0, 98,0) 10%, rgba(205, 0, 98,0.5));
border-image-slice: 1;
margin-top:150vh;
}
Improvements can certainly be made. So play around with it and tweak it to your liking.
you can animate border as:
.border-gradient {
border: solid 5px #FC5185;
transition: border-width 0.6s linear;
}
.border-gradient:hover { border-width: 10px; }

Changing header color when scroll with javascript

I've tried searching for a solution for a while.
So it starts transparent and then as I scroll a certain length it changes to have a background color. The code below is what I have so far
CSS File
header {
padding-top: 10px;
background-color: transparent;
color: white;
position: fixed;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
}
JS in script tags at the bottom of the HTML file
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
window.addEventListener("scroll", function(){
if($(document).scrollTop() > scroll_distance ) {
if(transparent) {
transparent = false;
$('header').removeClass('changeColor');
}
} else {
if( !transparent ) {
transparent = true;
$('header').addClass('changeColor');
}
}
});
HTML file
<header id="headernavbar">
...
</header>
Any tips on how to go about doing this? I tried using JQuery as well but same results. It doesn't add the class at all. I also cleared cookies and cache before visiting the site and tried multiple browsers with no luck. I was also going to add transition effects after I fixed this issue.
You got it opposite. There's no error but the logic error.
By default your background is already trasparent.
You've set on scroll from top, to remove that class when its not even added.
What you need to fix?
When the document_scrolltop > scroll_distance, you add the class, else remove it.
var scroll_distance = 100;
var transparent = true;
document.addEventListener("scroll", function() {
if ($(document).scrollTop() > scroll_distance) {
if (transparent) {
transparent = false;
$('header').addClass('changeColor');
}
} else {
if (!transparent) {
transparent = true;
$('header').removeClass('changeColor');
}
}
});
header {
padding-top: 10px;
background-color: transparent;
color: black;
position: fixed;
border:2px solid;
width: 100%;
z-index: 1;
}
.changeColor {
background-color: rgba(30, 32, 35, 0.9);
transition: all 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="headernavbar">
...
</header>
RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANRANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>DOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>RANDOMSTUFF<br>
Perhaps you could simplify the code, you can see it working if you paste it in the console of the developer tools
window.addEventListener('scroll', function(e) {
let headerColor = (window.scrollY) > 100 ? 'red' : 'blue';
console.log(headerColor);
});

jQuery detect if div is outside of view port vertically

I'm trying to detect when my div gets opened is the top of it outside of the view-port & if it is add a class to adjust the css.
So basically in this example on hover half of the div is missing so that should then add the class that would turn the div green. Because the code is meant to detect that the div is outside the viewport.
But I just cant get it to sync. I'm obviously doing something wrong here.
UPDATE
I have just noticed that it technically is working what is happening if both the top and bottom of the div goes outside of both the bottom and top of the view port then it triggers. I need it to only trigger when it goes out of the top.
JSfiddle
$(document).on("mouseenter", ":has('.infotip')", function() {
$(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
$(this).children(".infotip").removeClass("active");
});
// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
var $target = $(this).children(".infotip");
if ($target.length) {
var $bounce = $target.offset().top + $target.height();
if ($bounce > $(window).height()) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});
.infotip {
display: none;
height:500px;
width:100px;
position:absolute;
left:50px;
top:-250px;
}
.infotip.active {
display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */
.infotip.top {
background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */
.infotip.test {
background-color: rgba(35, 223, 51, 1.00)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
hover me
<div class="infotip onscreen">
Iam infotip
</div>
</div>
Here was the issue, on-hover it detect div height and if it overflows then changes the div to green.
$(document).on("mouseenter", function() {
var $target = $(".team-card").children(".infotip");
if ($target.length) {
var $bounce = $target.offset().top + $target.height();
if ($bounce > $(window).height()) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});
So I figured this out myself. Finally had a brain storm after realising what the height was down as mentioned on my update.
What I should have been doing is calculating the distance from the top and then detecting if that distance is less than one e.g. 0, -5, -250 etc. Then kick my statement in.
Just wasn't thinking about this one in the right manner for a bit.
JSFiddle
$(document).on("mouseenter", ":has('.infotip')", function() {
$(this).children(".infotip").addClass("active");
});
$(document).on("mouseleave", ":has('.infotip')", function() {
$(this).children(".infotip").removeClass("active");
});
// Infotip on screen
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() {
var $target = $(this).children(".infotip");
if ($target.length) {
var scrollTop = $(window).scrollTop(),
elementOffset = $target.offset().top,
bounce = (elementOffset - scrollTop);
if (bounce < 1 ) {
$target.addClass("test");
} else {
$target.addClass("top");
}
}
});
.infotip {
display: none;
height:500px;
width:100px;
position:absolute;
left:50px;
top:-250px;
}
.infotip.active {
display: block;
}
/* goes red when past top of viewport (which it will not do in this example) */
.infotip.top {
background-color: rgba(249, 14, 18, 1.00)
}
/* goes green if visible (which it should do when hovering) */
.infotip.test {
background-color: rgba(35, 223, 51, 1.00)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="team-card align">
hover me
<div class="infotip onscreen">
Iam infotip
</div>
</div>

Change navigation font color based on background

My problem is this. I have a fixed left navigation bar and I have to change the list font color based on the background of the section under it. The code is like this fiddle. So if the section is black and is below a link, the text is not seen. I have to change each list based on the background of a section under it so that it can be readable.
html
<div class="content">
<div id="left_side">
<div id="static_menu" class="">
<div id="main_navigation" class="">
<ul class="menu mainLeft" id="mymenu">
<li>Nav list 1</li>
<li>Nav list 2</li>
<li>Nav list 3</li>
<li>Nav list 4</li>
<li>Nav list 5</li>
</ul>
</div>
</div>
</div>
<div id="wrapper">
<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>
</div>
</div>
css
.content{
position:relative;
}
#left_side
{
position:fixed;
left: 20px;
right: 20px;
z-index:999;
}
.mainLeft
{
list-style-type:none;
margin-left:0px;
padding-left:0px;
}
.mainLeft li
{
padding:5px 0;
}
.mainLeft li a
{
color:#000;
margin-bottom:5px;
}
#wrapper
{
position:relative;
}
.section
{
width: 100%;
text-align:center;
padding:150px 0;
border:1px solid #666;
}
#section1
{
background: #fff;
}
#section2
{
background: #000;
color:#fff;
}
#section3
{
background: #fff;
}
#section4
{
background: #000;
color:#fff;
}
#section5
{
background: #fff;
}
Fiddel
To do what you asked for you can do this with jquery:
working fiddle
var _li, _sections;
$(function() {
_li = $("#mymenu").find("li");
_sections = $("#wrapper").find(".section");
$(window).on('scroll', liBgs);
});
function liBgs() {
for (var i = 0; i < _li.length ; i++) {
var _litop = _li.eq(i).offset().top;
for (var j = 0; j < _sections.length; j++) {
var $s = _sections.eq(j),
_sectop = $s.offset().top,
_secbottom = $s.offset().top+$s.height()-20;
if (_litop > _sectop && _litop > _secbottom) {
var _color = rgb2hex($s.css('background-color'));
_li.eq(i).find('a').css('color', (_color=="#ffffff") ? "#000000" : "#ffffff");
}
}
}
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
NOTE: rgb2hex() function was taken from this question: How to get hex color value rather than RGB value?
What this code does:
I'm basically comparing positions of the menu li's to the sections, checking under what
section each li is over everytime you scroll.. I'm not sure this is very efficient, but for something small scale it's ok.. if anyone knows how to make this even more efficient I'll be happy to learn.
Used jquery to do this. Found a reference here
HTML:
Added a extra attribute of color
<div class="section" id="section1" data-color="#333">section1</div>
JS:
$(window).on('scroll', function() {
var scrollTop = $(this).scrollTop();
$('.section').each(function() {
var topDistance = $(this).offset().top;
if ( (topDistance) < scrollTop ) {
$('#mymenu a').css('color',$(this).attr('data-color'));
}
});
});
DEMO
Can't you just give it a neutral colour to the fixed div and make it wrap around its content rather than have to resort to client scripts to dynamically change the colour? I have sanitized a bit the fixed element to make it look a bit more appealing...padding, margins, etc.
#left_side
{
position:fixed;
left: 20px;
top:10px;
z-index:999;
background-color:#eee;
padding:10px;
}
JS Fiddler Example
Something like this would work:
$(window).scroll(function() {
/* get current scroll-position within window */
var scroll = $(window).scrollTop();
$('.mainLeft li').each(function() {
/* get position of navigation-element (distance from top minus half of it's height, so that it changes color while it's half over black and half over white background) */
var elementPositionTop = parseFloat($(this).offset().top) + (parseFloat($(this).height() / 2));
/* change color for each background-change */
if (elementPositionTop >= 320 && elementPositionTop <= 640 || elementPositionTop >= 960 && elementPositionTop <= 1280) {
$(this).addClass('whiteText');
} else {
$(this).removeClass('whiteText');
}
});
});
Here's the additional CSS:
.mainLeft li.whiteText a {
color: #fff;
}
.section {
height: 18px;
overflow: hidden;
}
I gave the .section divs a fixed height because the JS I used works with fixed pixel values, and not all browsers interpret the height of elements the same if they're not defined...
Here's a fiddle: http://jsfiddle.net/Niffler/z34cG/
Updated.. see this fiddle
Do u Mean like this
$(document).scroll(function(){
var top=$(document).scrollTop()-322;
console.log(top)
if(top<0)
{
$('.mainLeft li a').css('color','black')
$('#li1 a').css('color',$('#section1').css('color'))
//$('#li1 a').css('color',"red")
}
if(top>0 && top<322)
{
$('.mainLeft li a').css('color','black')
$('#li2 a').css('color',$('#section2').css('color'))
//$('#li1 a').css('color',"red")
}
if(top>322 && top<644)
{
$('.mainLeft li a').css('color','black')
$('#li3 a').css('color',$('#section3').css('color'))
//$('#li1 a').css('color',"red")
}
if(top>644 && top<966)
{
$('.mainLeft li a').css('color','black')
$('#li4 a').css('color',$('#section4').css('color'))
//$('#li1 a').css('color',"red")
}
if(top>966 && top<1288)
{
$('.mainLeft li a').css('color','black')
$('#li5 a').css('color',$('#section5').css('color'))
//$('#li1 a').css('color',"red")
}
});

Making a sticky header work

I've got the following code for a sticky header, but I can't get the scroll to work and it's not a smooth transition. The #top-nav-wrapper barely scrolls when the fixed header below is activated:
<script>
$(document).scroll( function() {
var value = $(this).scrollTop();
if ( value > 48 ) {
$(".header").css("position", "fixed");
$("body").css("padding-top", "90px");
} else {
$(".header").css("position", "relative");
$("body").css("padding-top", "0");
}
});
</script>
The 48 value is the height of the #top-nav-wrapper, plus it has a box-shadow.
The .header class with the search bar is what should remain.
The basic html:
<div class="headerWrapper">
<div id="top-nav-wrapper"></div>
<div class="header"></div>
</div>
The CSS:
body {
background: #EEE;
}
#top-nav-wrapper {
width: 100%;
position: relative;
box-shadow: 0px 1px 1px 0px #B8B8B8;
z-index: 2001;
background: #EEE;
}
.header {
position: relative;
left: 0;
top: 0;
width: 100%;
min-height: 90px;
z-index: 2000;
background: #EEE;
height: 90px;
box-shadow: 0px 1px 2px #C4C4C4;
}
* I tried the following suggestion, but it's the same effect as before:
<script>
$(window).scroll( function() {
var value = $(this).scrollTop();
var $body = $('body');
var docked = $body.hasClass('docked');
if ( value > 48 ) {
if( !docked ) {
$body.addClass('docked');
}
} else {
if( docked ) {
$body.removeClass('docked');
}
}
});
</script>
Any ideas appreciated.
Update - I've changed the script to the following and placed it in the head - this resolves the top nav not scrolling dynamically and I added a placeholder div after the header and before the content with the same size height as the fixed header to keep the content where it should be (because the fixed header changes the natural flow), but there's still the lag/jump when the fixed header kicks in.
Placeholder CSS:
.headerPlaceholder {
height: 90px;
width: 100%;
display: none;
}
Solution to top nav not scrolling all the way after 48px scroll height was set:
<script>
$(document).ready(function () {
var div = $('.header');
var div2 = $('.headerPlaceholder');
var start = $(div).offset().top;
$.event.add(window, "scroll", function () {
var p = $(window).scrollTop();
$(div).css('position', ((p) > start) ? 'fixed' : 'static');
$(div).css('top', ((p) > start) ? '0px' : '');
$(div2).css('display', ((p) > start) ? 'block' : 'none');
});
});
</script>
To make it a smooth transition, there might need to be a slight delay and fadein/out effect, if anyone could help with that?
You can try
$(window).scroll( function() {
var value = $(this).scrollTop();
var $body = $('body');
var docked = $body.hasClass('docked');
if ( value > 48 ) {
if( !docked ) {
$body.addClass('docked');
}
} else {
if( docked ) {
$body.removeClass('docked');
}
}
});
CSS
.docked {
padding-top: 90px;
}
.docked .header {
position: fixed;
z-index: 2005;
}
You can be more efficient if there is an overall container you can target instead of body.

Categories

Resources