Clever Geek Handbook

Displaying the boot menu at boot

I don't know very much about Boostrap and I tried to find an answer online but with no success.

I am creating a website for a small company I work for based on the following template:

https://dcrazed.com/bent-app-landing-page-template/

I've tweaked texte for a bit of layouts, but my boss wants the menu bar to always be visible. The war panel will appear in the template and you will start scrolling down and will always be hidden from the home page. I managed to get it to show up and stay after the first scroll by changing the conditions of the If script.

// EXECUTE AND HIDE MENU $ (document) .ready (function () {

"use strict";

$(window).scroll(function() {

    "use strict";

    if ($(window).scrollTop() > 1000) {
        $(".navbar").css({
            'margin-top': '0px',
            'opacity': '1'
        })
        $(".navbar-nav>li>a").css({
            'padding-top': '15px'
        });
        $(".navbar-brand img").css({
            'height': '35px'
        });
        $(".navbar-brand img").css({
            'padding-top': '0px'
        });
        $(".navbar-default").css({
            'background-color': 'rgba(59, 59, 59, 0.7)'
        });
    } else {
        $(".navbar").css({
            'margin-top': '0px',
            'opacity': '1'
        })
        $(".navbar-nav>li>a").css({
            'padding-top': '15px'
        });
        $(".navbar-brand img").css({
            'height': '35px'
        });
        $(".navbar-brand img").css({
            'padding-top': '0px'
        });
        $(".navbar-default").css({
            'background-color': 'rgba(59, 59, 59, 0.7)'
        });

    }
});

});

Even when conditions change in case at least one scroll is still required.

+3


source to share


2 answers


If you add trigger('scroll')

, you can see it immediately.



$(window).scroll(function(){  
  // some code
}).trigger('scroll')
0


source


Option 1 (JS):

If you still want to use js, you can wrap your logic / method in a type function resizeHandler

and then call it on page loadresizeHandler();

OR like @ a.barbieri uses .trigger('scroll') 

$(document).ready(function() {
  "use strict";

  //scroll handler
  $(window).scroll(resizeHandler);
  //init
  resizeHandler();

  function resizeHandler(){
   if ($(window).scrollTop() > 1000) {
      $(".navbar").css({
        'margin-top': '0px',
        'opacity': '1'
      })
      $(".navbar-nav>li>a").css({
        'padding-top': '15px'
      });
      $(".navbar-brand img").css({
        'height': '35px'
      });
      $(".navbar-brand img").css({
        'padding-top': '0px'
      });
      $(".navbar-default").css({
        'background-color': 'rgba(59, 59, 59, 0.7)'
      });
    } else {
      $(".navbar").css({
        'margin-top': '0px',
        'opacity': '1'
      })
      $(".navbar-nav>li>a").css({
        'padding-top': '15px'
      });
      $(".navbar-brand img").css({
        'height': '35px'
      });
      $(".navbar-brand img").css({
        'padding-top': '0px'
      });
      $(".navbar-default").css({
        'background-color': 'rgba(59, 59, 59, 0.7)'
      });
    }
  }

});


Option 2 (CSS):

use media query to determine the size of the screen to show and hide.

Using media queries

A media query consists of an additional media type and zero or more expressions that constrain the scope of the style sheets using media features such as width, height, and color. Media queries added in CSS3 allow content to be displayed for a specific range of output devices without having to change the content itself.

REF: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

0


source






More articles:


All Articles