logo
down
shadow

Navbar/header animated change on scroll


Navbar/header animated change on scroll

By : Nicola Nauwynck
Date : November 20 2020, 01:01 AM


Share : facebook icon twitter icon
jQuery animated header on scroll

jQuery animated header on scroll


By : Ivan Lendyel
Date : March 29 2020, 07:55 AM
I hope this helps . Shrink the image as the header gets shrinked?
Fiddle.
code :
$(function(){
    $('#header_nav').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('#header_nav').data('size') == 'big')
        {
            $('#header_nav').data('size','small');
            $('#header_nav').stop().animate({
                height:'40px'
            },600);
            $('#header_nav img').stop().animate({
                height:'40px' /*image has the same effect like the header*/
            },600);
        }
    }
    else
    {
        if($('#header_nav').data('size') == 'small')
        {
            $('#header_nav').data('size','big');
            $('#header_nav').stop().animate({
                height:'100px'
            },600);
            $('#header_nav img').stop().animate({
                height:'100px' /*image has the same effect like the header*/
            },600);
        }  
    }
});
How can I shrink a header animated when I scroll down and enlarge it when I scroll up?

How can I shrink a header animated when I scroll down and enlarge it when I scroll up?


By : ningpp
Date : March 29 2020, 07:55 AM
To fix the issue you can do This should do it : http://jsfiddle.net/gmdxs42t/
code :
$(document).ready(function() {
var fflag = true;
$(window).scroll(function() {

   var top = $(document).scrollTop();

   if (top > 30 && fflag) {
       fflag = false; //Will stop re-entry on every px scrolled
       $("#header").animate({height:50}, 200);
       $("#header").animate({opacity:0.5}, 200);
   }
    if (top<30 && !fflag){ //Will occur when scroll reached top
       fflag=true; //Will enable the above condition entry when top exceeds 30
       $("#header").animate({height:100}, 200);
       $("#header").animate({opacity:1}, 200);   
   }

})});
Fixed position navbar/header works but content won't scroll under header

Fixed position navbar/header works but content won't scroll under header


By : user3129034
Date : March 29 2020, 07:55 AM
like below fixes the issue Hi I'm struggling the main content to go underneath the fixed header as the user scrolls down. , You state
code :
header .nav {
float:center; /* not a valid setting for float BTW */
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
position: fixed;
z-index:10;
}
header{
position: fixed;
}

header .nav {
margin-top: 10px;
margin-bottom: 0px;
margin-left: 400px;
}
How to change navbar-default to navbar-inverse on scroll?

How to change navbar-default to navbar-inverse on scroll?


By : Claudio Kwamena Adam
Date : March 29 2020, 07:55 AM
With these it helps Here's an example.
Use $(window).scroll() and addClass() to add the bg class to your nav when you scroll down past a certain point. Note that addClass and removeClass allow you to add/remove individual class names from tags where multiple classes exist.
code :
var viz=true, win = $(window), nav=$('nav');

win.scroll(function(){

    pos = win.scrollTop();
  
    if ( viz && pos > 100 ){
      viz = false;
      nav.addClass('bg');
    }else if ( !viz && pos < 100 ){
      viz = true;
      nav.removeClass('bg');
    }

});
body,
html {
  height: 2000px;
}
.bg{background:green !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a>
            </li>
            <li><a href="#">Page 1-2</a>
            </li>
            <li><a href="#">Page 1-3</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Page 2</a>
        </li>
        <li><a href="#">Page 3</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Change the navbar content when scrolling without jquery (Header Sticky on Scroll)?

Change the navbar content when scrolling without jquery (Header Sticky on Scroll)?


By : Rachit Joshi
Date : March 29 2020, 07:55 AM
This might help you You could define a boolean var and show one header or another based in the Y position of your current page.
To know the current Y position of your page, try the following:
code :
import { HostListener, Component, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
declare const window: any;

export class YourComponent { 

showFullHeader = true;
constructor() {}

@HostListener("window:scroll", [])
onWindowScroll() {

    const yPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    if (yPosition > 300) {
      showFullHeader = false;
    } else {
        showFullHeader = true;
    }

  }
}
Related Posts Related Posts :
  • Keypress event for ajax call does not work
  • responsive/fluid jQGrid with Twitter Bootstrap
  • IE10 does not seem to fire load event
  • Remove tipTip tool tip
  • jquery datepicker changing unavailable dates in one instance
  • TableTools plugin export buttons are not working
  • Prepopulate jquery token input textbox
  • Open a fancybox link with ajax
  • Getting jQuery and AngularJS content assist / auto-complete in eclipse for standalone HTML "file"
  • TR alternate background colour with unequal number of TD
  • DATATABLE jQuery TH and TD alignment
  • Jquery UI Convert Select's to Range Slider
  • Change text in text field according to link that has been clicked
  • Animate addClass + removeClass transitions?
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org