Attempting to dynamically alter the background color of a sticky header once a specific class reaches the top of the viewport

Question

Attempting to dynamically alter the background color of a sticky header once a specific class reaches the top of the viewport

I am in need of a solution to alter the background color of a simple sticky header whenever a div/class/id reaches the top of the window, and revert back when scrolled up. This change should occur multiple times.

The base code for the sticky header can be found here: https://jsfiddle.net/wzrfg2xe/1/

Below is the HTML Code:

<div class="sticky-element-positioner">
<div class="sticky-element">
<nav class='greedy-nav'>
<ul class='visible-links'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</ul>
</nav>
</div>
</div>

<section class="one"> blabla</section>
<section class="two"> blabla</section>
<section class="three"> blabla</section>
<section class="four"> blabla</section>
<section class="five"> blabla</section>

CSS

ul { margin: 0; }
.greedy-nav {
height: 40px;
position: relative;
min-width: 250px;
width: 100%;
background: #513e5d;
width: 100%;
text-align: center; }

.greedy-nav a {
display: block;
padding: 0 30px;
line-height: 40px;
font-size: 16px;
color: #ddd;
text-decoration: none; }

.greedy-nav a:hover { color: #fff; background: rgba(0,0,0,.1); }

.greedy-nav .visible-links { display: inline-table; }
.greedy-nav .visible-links li { display: table-cell; }
.greedy-nav .visible-links li:first-child { font-weight: bold; }
.greedy-nav .visible-links li:first-child a { color: #fff !important; }

.sticky-element,
.sticky-element-positioner {
height: 40px;
text-align: center;
width: 100%;
z-index: 5; }

.sticky-element { position: static; }

.sticky-element.sticky-element-sticky {
position: fixed;
left: 0;
top: 0;
margin: 0; }

.sticky-element-positioner { position: static; }

.one { background: green; height: 300px; }
.two { background: yellow; height: 300px; }
.three { background: red; height: 300px; }
.four { background: blue; height: 300px; }
.five { background: orange; height: 800px; }

JS

$(document).ready(function() {

var stickyElement = $('.sticky-element'),
stickyElementPositioner = $('.sticky-element-positioner');

function stickyElementFixed() {
stickyElement.addClass("sticky-element-sticky");
}

function stickyElementStatic() {
stickyElement.removeClass("sticky-element-sticky");
}

$(window).scroll(function() {
var elementTarget = (stickyElementPositioner.offset().top);
var scrollTop = $(window).scrollTop();

if (scrollTop <= elementTarget) {
stickyElementStatic();
} else {
stickyElementFixed();
}

});

});

I came across a potential solution on Stack Overflow that can be viewed here: jsfiddle.net/8onnaqL7/ (from this post).

Combining these solutions led me to this revised version: http://jsfiddle.net/tpuqtobo/

However, it seems that the new implementation has removed the styling of the sticky header entirely. I have tried various approaches to resolve this issue but without success.

If there are alternative methods to achieve both the sticky behavior and color changes, I would greatly appreciate any suggestions or insights on how to address this challenge.

Thank you in advance for your assistance!

javascript jquery html css

Answer 1

Answer №1

Your JavaScript code that utilizes the `removeClass()` function is currently removing all classes, including the `greedy-nav` class, leading to navigation issues.

Instead of only adding the `project-x` class, consider using the following code:

$(".greedy-nav").removeClass().addClass("greedy-nav project2");

Here is a working example on JSFiddle: http://jsfiddle.net/tpuqtobo/1/

I hope this solution proves helpful. Thank you!

Answer 2

Your JavaScript code that utilizes the `removeClass()` function is currently removing all classes, including the `greedy-nav` class, leading to navigation issues.

Instead of only adding the `project-x` class, consider using the following code:

$(".greedy-nav").removeClass().addClass("greedy-nav project2");

Here is a working example on JSFiddle: http://jsfiddle.net/tpuqtobo/1/

I hope this solution proves helpful. Thank you!

Answer 3

Answer №2

Give this a shot:

$(".greedy-nav").removeClass().addClass("greedy-nav project1");

All classes, including greedy-nav, were removed so they need to be added back for proper CSS styling.

Answer 4

Give this a shot:

$(".greedy-nav").removeClass().addClass("greedy-nav project1");

All classes, including greedy-nav, were removed so they need to be added back for proper CSS styling.

Answer 5

Answer №3

To accomplish this effect using only CSS, make sure to include the following code:

.sticky-element.sticky-element-sticky .greedy-nav {
    background: red;
}

Instead of just adding:

.sticky-element.sticky-element-sticky {
    background: red;
}

This is necessary because the main background header styling relies on the .greedy-nav element.

Is this information helpful for you?

Answer 6

To accomplish this effect using only CSS, make sure to include the following code:

.sticky-element.sticky-element-sticky .greedy-nav {
    background: red;
}

Instead of just adding:

.sticky-element.sticky-element-sticky {
    background: red;
}

This is necessary because the main background header styling relies on the .greedy-nav element.

Is this information helpful for you?

Answer 7

Answer №4

To implement a scrolling effect in your website, utilize the scroll method.

Below is a sample code snippet with fully functioning code:

$(document).ready(function () {
    $(document).on("scroll", onScroll);  
    
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

/* Add your CSS styles for the menu here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#Menu1">Menu1</a>

            </li>
            <li><a href="#Menu2">Menu2</a>

            </li>
            <li><a href="#Menu3">Menu3</a>

            </li>
            <li><a href="#Menu4">Menu4</a>

            </li>
        </ul>
    </div>
</div>
<div id="Menu1"></div>
<div id="Menu2"></div>
<div id="Menu3"></div>
<div id="Menu4"></div>

Answer 8

To implement a scrolling effect in your website, utilize the scroll method.

Below is a sample code snippet with fully functioning code:

$(document).ready(function () {
    $(document).on("scroll", onScroll);  
    
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

/* Add your CSS styles for the menu here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#Menu1">Menu1</a>

            </li>
            <li><a href="#Menu2">Menu2</a>

            </li>
            <li><a href="#Menu3">Menu3</a>

            </li>
            <li><a href="#Menu4">Menu4</a>

            </li>
        </ul>
    </div>
</div>
<div id="Menu1"></div>
<div id="Menu2"></div>
<div id="Menu3"></div>
<div id="Menu4"></div>

Attempting to dynamically alter the background color of a sticky header once a specific class reaches the top of the viewport

Answer №1

Answer №2

Answer №3

Answer №4

To implement a scrolling effect in your website, utilize the scroll method.

Similar questions

Troubleshooting: Dealing with undefined index error in PHP when using $_GET with Ajax

Determining the Clicked Button in ReactJS

The module 'pouchdb' appears to be missing, functioning correctly on Mac but encountering issues on Windows

Having difficulty selecting a nested ul with CSS, I'm currently exploring different options

Manipulating text alignment and positioning in CSS

ReactJS - Unable to access property of undefined object

Create a dynamic table using an array in jQuery

Can a nested array be divided into two separate arrays in Javascript?

Callback function not being triggered in Jquery's getJson method

Executing a curl POST request within an npm script

Leveraging the power of JavaScript's .map(...) method in a

How can I customize the color of the cross in the hamburger menu?

ways to display divs horizontally

What steps should I take to address the issue of receiving a "TypeError: Cannot read property 'toString' of undefined"?

Repositioning elements within the web browser

Jquery for controlling the navigation menu

Can you display names in capital letters from the randomUser.me API?

What is the best way to incorporate blade syntax into jQuery when using Laravel's Ajax functionality?

Firestore - Safely removing a large number of documents without running into concurrency problems

Commitments shatter amidst constructing a website