Scroll After Fixed Navigation

jQuery :

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
 
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
   
  };

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
 
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
 
    // init
    toggleAffix(ele, $(window), wrapper);
  });

});

HTML
<nav class="navbar navbar-expand-sm navbar-light" data-toggle="affix">

CSS

 .affix {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

/* fixed to top styles */
.affix.navbar {
  background-color: #333;
}
.affix.navbar .nav-item>a,
.affix.navbar .navbar-brand {
    color: #fff;

}

https://www.codeply.com/go/LDHQhWUG0x

Comments

Post a Comment

Popular posts from this blog

Bootstrap CSS Customize with SCSS CSS

Using Bootstrap with Bower First let's make a  package.json file for Node to see. Either use npm init -y or create a package.json file containing just an empty JSON object ( {} ). Now let's install gulp , gulp-bower , and gulp-sass : $ npm install --save-dev gulp gulp-bower gulp-sass Now let's use Bower to install bootstrap. This will allow us to import Bootstrap into our SCSS code and compile it down to CSS manually. Create a bower.json file using bower init or by manually creating one: Now let's install bootstrap-sass with Bower. $ bower install --save bootstrap-sass Create One file Now we can make an SCSS file that includes bootstrap into our project. Let's call our SCSS file css/app.scss : @ import "bootstrap" ; @ import "bootstrap/theme" ; Now let's use gulp to compile our app.scss , which includes Bootstrap SASS: Create On JS File with gulpfile.js var gulp = require ...
Read more

Best way to prevent page scrolling on drag (mobile)

 window.onmousedown= function (e) {            if (isTouchDevice()) {                 $(document).on('touchstart', function (e) {                     e.preventDefault();                 });             } }  window.onmouseup = function (e) {     $(document).off('touchstart'); }
Read more