0%

Hey! Do you have any query related to front end?

Sign in Sign up

Hanging menu on window scrollBack

Concept behind this:

Appending of menu from one to another as window scrolling value reaching beyond the addition distance of menu height and its top position value.

Html and css points to keep in mind:

  • Keep navigation menu inside a wrapper.
  • Write css for header drop down.

It is necessary to wrap menu, otherwise content will fluctuate due to append() and empty() functions of jquery.

jQuery script:

var headerNev_w, headerNev_h, menu_h, menuTopPos;
$(document).ready(function(){
	//HeaderNav outer width and outer height
	headerNev_w = $('.headerNav').outerWidth(true);
	headerNev_h = $('.headerNav').outerHeight(true);

	//Apply width to headerNav
	$('.headerNav').css('width', headerNev_w+'px');

	//Apply height to header
	$('header').css('height', headerNev_h+'px');

	//Get menuCon height
	menu_h = $('.menuCon').outerHeight(true);

	//Apply height to menuWrapper
	$('.menuWrapper').css('height', menu_h+'px');

	//Get menuCon Top pos
	menuTopPos = $('.menuCon').offset().top;

	//Call setRespMenu
	setRespMenu();
});

Applying own width in style to headerNav is required, because after adding fixed position it will take auto width. So this will not cover the container area and it will show as an icon.

Similarly, height of headerNav is required to assign the height of header tag, otherwise content will fluctuate. Similarly goes with menuWrapper, it takes menu height.

$('.menuCon').offset().top has been used to take top position of menu from document.

$(window).scroll(function(){
	setRespMenu();
});

$(window).scroll() returns scrolling value of window. During scrolling we have called setRespMenu() to arrange menu according to scroll change value.

//Define setRespMenu
var menuStat = false;
function setRespMenu(){
	var scrollVal = $(this).scrollTop();
	if(scrollVal >= (menu_h+menuTopPos) && menuStat == false){
		menuStat = true;
		$('.headerNav').empty().append('').append($('.menuCon')).addClass('activeStickey').css('top',0);
		var dropDown_w = $('.headerNav .menuCon').width();
		$('.headerNav .menuCon').css({'top': (headerNev_h+10)+'px', 'marginLeft':'-'+(dropDown_w/2)+'px'});
	}else{
		if(scrollVal < (menu_h+menuTopPos)){
			menuStat = false;
			$('.menuWrapper').append($('.menuCon'));
			$('.menuWrapper .menuCon').removeClass('activeDropDown').removeAttr('style');
			$('.headerNav').empty().append('

Navigation

').removeClass('activeStickey').css('top','-'+(menu_h+menuTopPos)+'px'); } } }

Here menuStat variable has been set to boolean to prevent unnecessary call of function. This variable set to true if window scroll reaches beyond addition of menu top value and menu height and again becomes false, if it becomes lower.

In if statement, we have truncate the header and appended span with bars and menu items and in else statement again we have restored the menu to its original position.

$(document).on('click','.barMenu', function(e){}); function is just to toggle the class from bars to cross and vise-versa and $(document).click(function(){}); function is just make dropdown menu hide if somewhere mouse has been clicked.

This is very useful in responsive.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Image selection like checkbox

    Select your image like a checkbox with little jQuery

    • 338
    • 32
    • 338
    • facebook icon
    • twitter icon
    • google plus
  • Get index of an element

    Get index of an element

    • 184
    • 2
    • 184
    • facebook icon
    • twitter icon
    • google plus
  • Show thumbnail on browse

    Way to show thumbnail of browsed image.

    • 214
    • 5
    • 214
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password