Change background color menu fixed top khi scroll

Question

In this article, we will discuss how to change the menu background when we scroll down using Elementor’s sticky effects.

Nội dung chính Show

Step 1: Create a sticky header using Elementor Pro.
Step 2: Add the CSS code to make the header/menu background change colour on scroll.
How do I change the background color of my scroll header?
How do I change the background color of my navigation bar while scrolling?
How to set navbar fixed top when scrolling?
How do you change the background color on scroll in Elementor?

If you don’t have a header already created, you can go to Templates > Theme Builder from the WordPress dashboard. Click on Add New, and select Header as the type of template. The Elementor editor will open and you can go ahead and create your header.

To make the header sticky, select the parent section of the header, go to the advanced tab in the Elementor editor and scroll down to Motion Effects. Here you can make the header sticky to the top by selecting the top option from the sticky dropdown menu. Add an appropriate effect offset (Effect Offset: the amount of distance from the top of the screen when the sticky effect will trigger). Adding an effect offset value is essential for the effects to take place.

Before we add our CSS code, we need to add a class to our menu, so that we can target it and change the font color. For this example, we will use the class “sticky-menu“. Simply select your menu, go to the advanced tab and add this class inside the CSS class field.

Here is the CSS code:

👨‍💻Here is the CSS to copy and paste:
/* -- Changing the menu background on scroll effect -- */
.elementor-sticky--effects {
   background: 
# 3E3EF5!important; /* change the background color here*/
}
.elementor-sticky--effects .sticky-menu ul li a /* change the menu text color here*/ {
   color: 
# fff!important;
}
.elementor-sticky--effects, .sticky-menu ul li a {
  transition: .5s all ease-in-out;
}

You can set your own background colour by simply changing the hex code to the colour you want. We have added comments beside the CSS code so you can easily understand which code is associated with which element.

However I lose (when I scroll into the page where the backgrund changes frvom 'black to white'.... two things:

I want to use the mobile nav for the whole site, and this code was working until this new code was inserted:

@media screen and (min-width:950px) {.header-nav, .header-actions { display: none!important} .header-burger { display: flex!important;} .header--menu-open .header-menu {opacity: 1; visibility: visible;}}

the nav + (in the current case, the links) are white and not responding to what th background is to be legible.

$(document).ready(function(){  
      $(window).scroll(function() {  
        if ($(document).scrollTop() >1290 ) {   
          $(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");   
        }else if ($(document).scrollTop() >850) {   
            $(".navbar-fixed-top").css("background-color", "black");   
          }else if ($(document).scrollTop() >350) {   
            $(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");   
          }  
         else {  
          $(".navbar-fixed-top").css("background-color", "red");   
        }  
      });  
    });

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);  
body {  
  font-family: "Roboto Slab", sans-serif;  
  position: relative;  
}
h1,  
h2,  
h3,  
h4 {  
  font-family: "Open Sans", sans-serif;  
}
.main {  
  padding-top: 50px;  
}

# home {  
  padding-top: 20%;  
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s31.postimg.org/l5q32ptln/coffee_cup_mug_apple.jpg');  
  background-attachment: fixed;  
  background-repeat: no-repeat;  
  background-position: center center;  
  position: relative;  
  height: 100vh;  
}

# home h2 {  
  color: white;  
  font-size: 4em;  
}

# home h4 {  
  color: white;  
  font-size: 2em;  
}

# home ul {  
  list-style-type: none;  
  text-align: center;  
}

# home li {  
  padding-bottom: 12px;  
  padding-right: 12px;  
  display: inline;  
}

# home li:last-child {  
  padding: 0;  
}
@media (max-width: 710px) {  
  
# home li {  
    display: block;  
  }  
}
.img-style {  
  height: 200px;  
  width: 200px;  
  margin-top: 50px;  
}

# about {  
  height: 100vh;  
  padding-top: 10%;  
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s32.postimg.org/sm6o6617p/photo_1432821596592_e2c18b78144f.jpg');  
  background-attachment: fixed;  
  background-repeat: no-repeat;  
  background-position: center center;  
  position: relative;  
  color: white;  
}

# about p,  
li {  
  font-size: 17px;  
}
.navbar.color-yellow {  
  background-color: yellow;  
  height: 50px;  
  color: yellow;  
}
.navbar.color-change {  
  background-color: 
# f45b69;  
  height: 50px;  
  color: rgba(255, 254, 255, 0.8);  
}

# portfolio {  
  padding-top: 30px;  
  rgba(226,  
  226,  
  226,  
  1);  
  background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 25%, rgba(219, 219, 219, 1) 57%, rgba(254, 254, 254, 1) 100%);  
  height: 100vh;  
}

# portfolio .block .portfolio-contant ul li {  
  float: left;  
  width: 32.22%;  
  overflow: hidden;  
  margin: 6px;  
  position: relative;  
}

# portfolio .block .portfolio-contant ul li:hover .overly {  
  opacity: 1;  
}

# portfolio .block .portfolio-contant ul li:hover .position-center {  
  position: absolute;  
  top: 50%;  
  -webkit-transform: translate(0%, -50%);  
  -moz-transform: translate(0%, -50%);  
  -ms-transform: translate(0%, -50%);  
  transform: translate(0%, -50%);  
}

# portfolio .block .portfolio-contant ul li a {  
  display: block;  
  color: 
# fff;  
}

# portfolio .block .portfolio-contant ul li a h2 {  
  font-size: 22px;  
  text-transform: uppercase;  
  letter-spacing: 1px;  
}

# portfolio .block .portfolio-contant ul li a p {  
  font-size: 15px;  
}

# portfolio .block .portfolio-contant ul li a span {  
  font-style: italic;  
  font-size: 13px;  
  color: 
# 655E7A;  
}

# portfolio .block .portfolio-contant ul img {  
  width: 100%;  
  height: auto;  
}

# portfolio .block .portfolio-contant .overly {  
  position: absolute;  
  top: 0;  
  bottom: 0;  
  right: 0;  
  left: 0;  
  background: rgba(0, 0, 0, 0.9);  
  opacity: 0;  
  -webkit-transition: .3s all;  
  -o-transition: .3s all;  
  transition: .3s all;  
  text-align: center;  
}

# portfolio .block .portfolio-contant .position-center {  
  position: absolute;  
  top: 50%;  
  left: 10%;  
  -webkit-transform: translate(0%, 50%);  
  -moz-transform: translate(0%, 50%);  
  -ms-transform: translate(0%, 50%);  
  transform: translate(0%, 50%);  
  -webkit-transition: .5s all;  
  -o-transition: .5s all;  
  transition: .5s all;  
}

# contact {  
  height: 100vh;  
  padding-top: 10%;  
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");  
  background-attachment: fixed;  
  background-size: cover;  
  background-repeat: no-repeat;  
  background-position: center center;  
  position: relative;  
}

# contact h3 {  
  color: white;  
}
footer ul {  
  list-style-type: none;  
  text-align: center;  
}
footer li {  
  display: inline;  
  padding-right: 10px;  
}
footer li:last-child {  
  padding: 0;  
}
footer p {  
  color: grey;  
  font-size: 11px;  
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>  
<!DOCTYPE html>  
<html lang="en">
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>Document</title>  
</head>
<body>  
  <header>  
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">  
      <div class="container">  
        <div class="navbar-header">  
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="
# collapse" aria-expanded="false">  
          <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" href="
# featured">Portfolio</a>  
        </div>  
        <!-- navbar-header -->  
        <div class="collapse navbar-collapse" id="collapse">  
          <ul class="nav navbar-nav navbar-right">  
            <li class="active"><a href="
# home">Home</a></li>  
            <li><a href="
# about">About</a></li>  
            <li><a href="
# portfolio">Portfolio</a></li>  
            <li><a href="
# contact">Contact</a></li>  
          </ul>  
        </div>  
        <!-- collapse navbar-collapse -->
      </div>  
      <!-- container -->  
    </nav>  
  </header>
  <div class="main">  
    <div class="row " id="home" data-speed="2" data-type="background">  
      <div class="container">  
        <h2 class="text-center">Welcome to my portfolio</h2>  
        <h4 class="text-center">Where awesomeness is crafted</h4>  
        <hr>  
        <ul>  
          <li><a href="https://github.com/vamshi121" class="btn btn-primary"><i class="fa fa-github"></i> GitHub</a></li>  
          <li><a href="https://tn.linkedin.com/in/mannemvamshi" class="btn btn-primary"><i class="fa fa-linkedin"></i> LinkedIn</a></li>  
          <li><a href="https://freecodecamp.com/" class="btn btn-primary"><i class="fa fa-fire"></i> FreeCodeCamp</a></li>
        </ul>  
      </div>  
      <!--container-->
    </div>  
    <!--home-->  
    <div class="row" id="about" data-speed="2" data-type="background">  
      <div class="container">  
        <div class="row">  
          <div class="col-md-5 col-md-offset-1">  
            <h2>About me</h2>  
            <p>Courteous and Enthusiastic,I'm interested in IT and around in its globe. I began to be fascinated by web programming i.e, building websites and developing cross-platform apps.I'm always looking for new ventures where i can learn evolve and  
              expertise.  
              </marquee>  
          </div>  
          </p>  
          <p>My skills are:  
            <ul>  
              <li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>  
              <li>Back-end: Ruby on Rails</li>  
              <li>Methodology: Agile, TDD</li>  
            </ul>  
          </p>  
        </div>  
        <!--col-md-5-->  
        <div class="col-md-4 col-md-offset-1">  
          <img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />  
        </div>  
      </div>  
      <!--row-->  
    </div>  
    <!--container-->  
  </div>  
  <!--about-->  
  <div class="row" id="portfolio" data-speed="2" data-type="background">  
    <div class="container">  
      <h2 class="text-center">Portfolio projects</h2>  
      <div class="row">  
        <div class="col-md-12">  
          <div class="block">  
            <div class="portfolio-contant">  
              <ul id="portfolio-contant-active">  
                <li class="mix Branding">  
                  <a href="#">  
                    <img src="#" alt="">  
                    <div class="overly">  
                      <div class="position-center">  
                        <h2>Local Support</h2>
                      </div>  
                    </div>  
                    <!--overly-->  
                  </a>  
                </li>  
              </ul>  
            </div>  
            <!--portfolio-contant-->  
          </div>  
          <!--block-->  
        </div>  
        <!--col-->  
      </div>  
      <!--row-->  
    </div>  
    <!--container-->  
  </div>  
  <!--portfolio-->  
  <div class="row" id="contact" data-speed="2" data-type="background">  
    <div class="container">  
      <div class="col-md-4 col-md-offset-1">  
        <h3>Contact me at:</h3>  
        <h3>[email protected]</h3>  
      </div>  
      <!--col-md-4-->  
    </div>  
    <!--container-->  
  </div>  
  <!--contact-->  
  </div>  
  <!--main-->  
  <footer>  
    <ul>  
      <li><a href="
# home">Home</a> </li>  
      <li><a href="
# about">About</a> </li>  
      <li><a href="
# portfolio">Portfolio</a> </li>  
      <li><a href="
# contact">Contact</a> </li>  
    </ul>  
    <p class="text-center">Copyright © - All Rights Reserved. </p>  
  </footer>
</body>
</html>

<script> 
    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() >1920 ) { 
          $(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)"); 
        } else if ($(document).scrollTop() >1580) { 
            $(".navbar-fixed-top").css("background-color", "black"); 
        } else if ($(document).scrollTop() >620) { 
            $(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)"); 
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); 
        }
      });
    });
</script>

How do I change the background color of my scroll header?

Change sticky header color on scroll.

Use The Advanced Tab. For the next steps we will be using the Advanced Tab in the Section Controls..

Change the Margin. ... .

Set The Z-index. ... .

Set to Sticky. ... .

Use the Style Tab. ... .

Setting The Final Color. ... .

Adding the Scrolling Effect. ... .

Set the Values..

How to Change Navbar Background Color On Scroll.

The window. scroll Function to capture the scroll event whenever user scrolls..

The scrollNavbar function is used to declare what happen whenever user scrolls..

Steps to make bootstrap nav fixed top after scroll.

Create navbar on top of page..

Now check if window scrolled window. ... .

Check if scrolled more than x amount of px if (window. ... .

Select navbar element and add function classList.add('fixed-top'); to fix on top..

Remove class fixed-top when page scrolled back to top..

How do you change the background color on scroll in Elementor?

To do this, add the widget on the page and your Elementor template in the Content tab. Note: For this to work, don't use any background colour or images in your Elementor template sections. Then under the Scrolling Options tab, go to Background Transition and turn on the toggle.

mẹo hay Top List Top