Develop Reference

Script causing div to blink when scroll

I am learning JavaScript. I created a navigation bar with two divs:
And added a function so that when the user scrolls down, the first div will fadeOut:
$(document).ready(function() {
var $nav = $('.first-nav'); //Caching element
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we start fadeIn
if ($(this).scrollTop() > 275) {
$nav.fadeOut("fast");
} else {
$nav.fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top pages">
<div class="container-fluid first-nav">
<button id="nav-toggle" data-target=".sidebar-right" data-toggle="sidebar" class="navbar-toggle toggle-right" type="button">
<span></span>
</button>
Login
<button id="get_quote_navbar" name="get_quote_navbar" class="btn btn-login">Get Quote</button>
<i class="fa fa-phone"></i> (877) 400-0232
<!-- Logo -->
<!-- /Logo -->
Home
For Home
For Business
</div>
<div id="navigation" class="col-md-12 sub-nav">
<div class="col-md-6 sub-nav-left">
Commercial
Construction
Multy-family
Partnership
</div>
<div class="col-md-3 sub-nav-right">
<button id="get_quote" name="get_quote_navbar" class="btn btn-quote">Get Quote</button>
</div>
</div>
</nav>
All works fine. In CSS, I created #media for min and max width. And when I do that, for desktop and tablet is all good, but when I want to put fixed first div for mobile, JavaScript makes a problem and I have blinked div when scroll up-down.
How I can add in JS function if (width < 1024) then $nav.fadeIn();?

Try:
if ($(window).width() < 1024) {
$nav.fadeIn();
}

If you want to work with media queries in javaScript, just use the window.matchMedia() as following:
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}
Full reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
To get the effect on resizing the window, you need to do like:
function foo(){
//code here
}
foo();
$(window).on('resize orientationchange',foo);

Thanks guys, I succeeded. This is a code.
$(document).ready(function(){
var $nav = $('.first-nav');//Caching element
// hide .navbar first - you can also do this in css .nav{display:none;}
// fade in .navbar
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 275 && $(window).width() > 1024) {
$nav.fadeOut("fast");
} else {
$nav.fadeIn();
}
});
});
});

you can do like this for test the with of the window,
note: you have to refresh the page when you change the size of the window
var widthScreen = window.matchMedia('(max-width: 1023px)').matches;
if(widthScreen){
$nav.fadeIn();
}

CSS- jQuery - scroll one div to left while expanding another div at same time to width 100%

I have html page/ screen split into 4 main parts/ divs. Header, footer, main body and left vertical navigation panel. the navigation panel width is 20% and main body div is 80% width of screen. I have button in navigation panel to hide and display. so when user click this, it hide navigation panel and make main-body width to 100% of screen and vise versa. I have achieved this functionality using jQuery but its not smooth, what I mean by this, on click navigation panel slides to left but same time it make main_body disappears until navigation panel complete scroll to left.
I want this functionally to run smooth i.e. main body div increases its width same time navigation panel is scrolling to left.
http://jsfiddle.net/toxic_kz/73c8o8tq/
jQuery
$(document).ready(function () {
$(".NavigationpanelIcon_Wrapper").click(function () {
$('#NavigationBlock').hide('slide', { direction: 'left' }, 1000);
$('.Main_body_Right_Wrapper').css('width', '100%');
});
});
HTML ASP.net-MVC - Razor
<div id="body_main_wrapper">
<div id="NavigationBlock" class="Navigation_Left_Pannel_Wrapper">
<div id="Navigation_panel_sideBar">
<div class="NavigationpanelIcon_Wrapper">
<span class="_blank_glyphicon">
<i class="glyphicon glyphicon-chevron-right"></i>
</span>
</div>
<div class="NavigationpanelText_Wrapper">
<span class="navigationpaneltext">
Available Functions
</span>
</div>
</div>
<div id="Navigation_list_wrapper">
#{Html.RenderAction("DisplayFunctionsList", "Dashboard");}
</div>
</div> <!--end Navigation_Left_Pannel_Wrapper-->
<div class="Main_body_Right_Wrapper">
#RenderBody()
</div> <!--end Main_body_Right_pannel_Wrapper-->
</div> <!--end body_main_wrapper-->

I tried to replicate this quickly Fiddle here
You could wrap both elements and float the sidebar to the left while giving it a fixed position size then give the main body a margin-left that equals to the sidebar navigation width.. then on click when you hide the sidebar and just reset the main body's margin ?
Let me know if it's not working for you..

Animating the width of .Main_body_Right_Wrapper should do the trick:
$(document).ready(function () {
$(".NavigationpanelIcon_Wrapper").click(function () {
var duration = 1000;
$('#NavigationBlock').hide('slide', { direction: 'left' }, duration);
$('.Main_body_Right_Wrapper').animate({
width: '100%'
}, duration);
});
});
Edit: I forked #AwRak's fiddle to illustrate it.

CSS animated hamburger icon and remove class on scroll?

I want to achieve 2 things when in responsive small screen size:
Create a onclick CSS animated 'hamburger' icon into a cross icon (now it is just a fadeIn/Out effect).
Remove class on scroll event so cross icon turns back in default hamburger icon.
I'm now using svg images for the nav-btn.
I know that i have to add a removeClass action on the scroll event, but tried some different things, but my JS-skills aren't that good.
Hope there is someone that can help or guide me threw this either the one or the other.
Here the FIDDLE
Screenshots:
Cross need to changes back in hamburger icon on scroll:
Html:
<header>
<nav>
<div class="col-nav">
Logo
</div>
<ul>
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item3</li>
</ul>
</nav>
</header>
Javascript:
$(function() {
$('.nav-btn').click(function() {
$('nav ul').fadeToggle(300);
$(this).toggleClass("open");
})
});
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav ul').hide(); }
});

Add $('.nav-btn').removeClass('open');
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('nav ul').hide();
$('.nav-btn').removeClass('open');
}
});

Box content scroll on mouse over

I have this navigation that can expand when the user clicks a drop down arrow, This navigations is held within a box container with overflow hidden. What I'm trying to achieve is when the users mouse is in the top 20% of the box it scrolls up, and when its in the bottom 20% it scrolls down. I've tried a various number of plugins and tried coding it myself but so far no luck!
This has to be responsive so I am working in percentages.
HTML SET UP:
<div class="container">
<div class="title">Where to next? <span>(this title will be fixed)</span></div>
<ul class="pagesNav">
<li>Page1</li>
<li class="has_children">
Page2
<ul class="children">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Page3</li>
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</div>
Take a look at my fiddle:
http://jsfiddle.net/7d8fA/

You can get the desired effect by this :
var height=$('.container').height();
var top20=(height/100)*20;
var top80=height-top20;
$('.container').mouseover(function(e) {
e.stopPropagation();
if ((e.clientY-e.currentTarget.offsetTop)<top20) {
$(".container").animate({
scrollTop: 0
}, 10);
} else if (e.clientY>top80) {
$(".container").animate({
scrollTop: height
}, 10);
}
});
forked fiddle -> http://jsfiddle.net/U5Uk8/

jquery hide/show based on scroll

So I was given a web template that uses a jquery library called sticky, and it "sticks" the navigation (starts at the bottom and moves up) at the top of the page, as you scroll.
I want to be able to plop a logo onto the navigation once it hits its resting place (post scroll). Similar to this website - http://99u.com/. Once you scroll past the image header, the logo fade's in to the nav bar and then stays on the page. Anyhow, here is the excerpt of the jquery code:
<script>
$(window).load(function() {
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
});
</script>
And here is the excerpt of the html:
<div with image slideshow></div>
<nav>
<div class="container">
<div class="thirteen columns">
<ul id="nav" class="links">
<li id="sticker"><img src="[image i want to display after scroll]" /></li>
<li>About</li>
<li>Contests</li>
<li>etc.</li>
</ul>
</div>
</div>
</nav>
<div's and the rest of the page's content></div>
This whole template is responsive. Any help would be appreciated, or if someone can point me in the right direction. Thanks!

Take a look at scrollTop and offset.
This is untested but it would look something like this:
$(window).scroll(function(){
if($("#nav").offset().top <= $(window).scrollTop)
$("#nav").css({"position":"fixed","top":"0px", "left":"0px"});
else
$("#nav").css({"position":"relative"});
});
Basically, as the user scrolls, check the windows scroll position and if it passes the top of the nav, switch the nav over to fixed positioning. In my code above, the check on the way back may need a little tweaking but when they scroll to a position less than the height of the nav, put the nav back to relative positioning.
Also instead of switching to position fixed you could show/hide a totally separate nav, might actually make life easier.
-Ken

You can test the position property of the menu and when it changes, hide/show the image via adding/removing a class:
CSS:
#sticker.hidden { width:0; height:0; border:0; padding:0; margin:0; }
#sticker.hidden * { display:none; }
Javascript:
$(window).load(function () {
$('nav').sticky({
topSpacing: 0,
className: 'sticky',
wrapperClassName: 'my-wrapper'
});
var elem = $('#sticker');
var nav = $('nav');
var pos = nav.css('position');
$(window).scroll(function(){
if (nav.css('position')!=pos) { // if changed
if (pos=='fixed') {
elem.addClass('hidden');
} else {
elem.removeClass('hidden');
}
pos = nav.css('position');
}
});
});
jsfiddle

Thanks for the suggestions. They both helped! Here is what i ended up doing:
<script>
$(window).load(function() {
$('#sticker').css({'display':'none'});
$('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
$(this).scroll(function() {
if($('nav').offset().top <= $(window).scrollTop()) {
$('#sticker').fadeIn('fast');
} else {
$('#sticker').css({'display':'none'});
}
});
});
</script>