Adjusting the navbar color on scroll

I am looking to change the color of my navbar upon scrolling. When the navbar is at the top, the background should be transparent. Thank you to everyone for the attention and I apologize for my poor English!

/* Navbar Color */

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  box-shadow: 1px 1px #000;
}
.navbar-toggle {
  background-color: transparent;
  border: none;
}
.navbar-toggle:hover {
  background-color: transparent! important;
}
.navbar-toggle:focus {
  background-color: transparent! important;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
  color: #FFF;
  text-shadow: 1px 1px #000;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: yellow;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: blue;
}
.dropdown-menu>li>a {
  color: green;
}
.dropdown-menu>li>a:hover {
  background-color: brown;
  color: violet;
}
.navbar-brand>li>a:hover {
  color: white;
}
@media only screen and (max-width: 766px) {
  .collapsing,
  .in {
    background: #fff;
  }
  .collapsing ul li a,
  .in ul li a {
    color: #fff!important;
    float: left;
  }
  .collapsing ul li a:hover,
  .in ul li a:hover {
    color: #fff !important;
    background-color: #E1332D;
  }
}
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top" style="color: white;">LUCA DELCONTE</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#about"><i class="fa fa-smile-o" aria-hidden="true"></i> 
    About</a>
        </li>
        <li>
          <a class="page-scroll" href="#services"><i class="fa fa-diamond" aria-hidden="true"></i>
     Design</a>
        </li>
        <li>
          <a class="page-scroll" href="#work"><i class="fa fa-lightbulb-o" aria-hidden="true"></i>
     Work</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i>
     Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

Answer №1

Implement the Bootstrap Affix component to monitor scrolling instead of relying on additional jQuery/JavaScript. Use the .affix-top and .affix CSS classes to style the navbar accordingly.

   /* styling for navbar when affixed to the page */ 
   .affix {
         background-color: black;   
    }

    @media (min-width:768px) {
        .affix-top {
          /* styling for navbar at the top */
          background-color: transparent;
          border-color: transparent;
          padding: 15px; 
        }
    }

Determine the position at which you want the navbar to change styles (e.g. 400px from the top)

<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">

See a demo in action:


For guidance on implementing this in Bootstrap 4, check out: Animate/Shrink NavBar on scroll using Bootstrap 4

Answer №2

Enhancing User Experience with jQuery

/**
 * Monitor scrolling behavior to dynamically adjust header opacity
 */
function adjustHeaderOpacity(){
    var scrollThreshold = $('.navbar').height() * 2; // Threshold for navbar opacity change in pixels

    if($(window).scrollTop() > scrollThreshold){
        $('.navbar').addClass("scrolled");
    }else{
        $('.navbar').removeClass("scrolled");
    }
}

if($('.navbar').length > 0){
    $(window).on("scroll load resize", function(){
        adjustHeaderOpacity();
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

Stopping jQuery fadeOut from setting the display property to 'hidden'

I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller ...

What is the best way to center a specific element within a flex container?

Is there a way to center a specific div within a flex container? Let me explain using some code: Take a look at this code snippet: <html> <head> <style> div.flex_container { display: flex; flex-direct ...

The extent of a nameless function when used as a parameter

I am currently developing a straightforward application. Whenever a user hovers over an item in the list (li), the text color changes to green, and reverts back to black when the mouse moves away. Is it possible to replace lis[i] with this keyword in the ...

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

I'm having trouble with using setInterval() or the increment operator (i+=) while drawing on a canvas in Javascript. Can anyone help me out? I'm new

I am looking to create an animation where a square's stroke is drawn starting from the clicked position on a canvas. Currently, I am facing an issue where the values of variables p & q are not updating as expected when drawing the square at the click ...

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

How can I ensure the end of the list is clearly visible?

I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...

How can I make a Material UI element fill the entire remaining width of the Grid?

Is there a way to make the child element take up the remaining width of the grid in Material UI? I am trying to have the "User Name" text field fill up the rest of the space in the grid cell but so far I have not been successful. I have even attempted us ...

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

The theme I designed import { createMuiTheme } from 'material-ui/styles'; export const MyTheme = createMuiTheme({ palette: { primary: { light: '#757ce8', main: '#3f50 ...

Inserting a vertical barrier in the midst of the content

I am struggling to create a vertical divider and align the text properly in the top right corner of my screen. https://i.sstatic.net/UqURE.png Currently, I am facing issues with displaying the divider and positioning the text correctly. <div class="r ...

Applying CSS to Align List Items to the Left with Word Wrap

Over at my blog page qavalidation.com, I am faced with an issue related to the alignment of vertical menus with links. When word wrap is applied, there seems to be a misalignment in the left indentation. Can someone provide guidance on the correct CSS sty ...

Ensuring the alignment of a personalized list bullet with the accompanying text

Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point. While this technique somewhat achieves the goa ...

Indent the initial line of a new paragraph

CSS <p><br />1.2 text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext text text</p> <p><br />1.3 text text text text ...

Having trouble with submitting the jQuery form

I have written a script to submit a form after validation and receive the values in a PHP file using $_POST. However, I am not able to retrieve the values in the PHP file. When I try to echo the values, it shows up as blank. Can someone please guide me a ...

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

Show the modal content in Bootstrap on mobile and tablet screens

I have exhaustively searched the web for a solution to my issue, but unfortunately, I have come up empty-handed. I am hoping that you can offer some guidance in this matter. I am currently utilizing modals to showcase details on my website. However, when ...

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

Execute HTML and JS files through Eclipse PDT to view in a web browser

Is it possible to open HTML and JS files in a web browser within Eclipse PDT? Right now, only PHP files seem to launch successfully, otherwise an "Unable to Launch" dialog pops up. Any advice is appreciated! ...

Tips for using the foreach loop to print out multiple arrays

I am working with two arrays in PHP: post_titles and posts. I need to figure out how to print them sequentially using a foreach loop. Printing one array at a time is not an issue, as shown below: <?php foreach ($titles as $row) { ?> <?php ec ...