How can we seamlessly transition from adding a class to setting scrollTop on a particular div?

I have successfully implemented a jQuery script to change the background color of my navbar on scroll. Here's the code I used:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.acetrnt-stickynav-transparent');

    if (scrollPos > 800) {
      navbar.addClass('acetrnt-stickynav-color');
    } else {
      navbar.removeClass('acetrnt-stickynav-color');
    }
  });
});

However, there is one thing I'm unsure about. Is it possible for the .addClass function to trigger only after reaching a specific div, such as my container div?

You can check out the live site here:

jquerycsswordpress

Answer №1

If you want a seamless transition, simply include 

transition: background-color .3s ease;
in the style for .acetrnt-stickynav-transparent, and adjust the timing and easing to your liking.

To initiate the transition when the #container div is reached instead of using an arbitrary 800px point, substitute 800 with $('#container').offset().top within your script.

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

Changing class in jQuery ignores CSS style

I have a id="header" div that initially has css rule: padding: 25px 0;. I want to decrease the padding of this div when scrolling down the page. $(document).ready(function() { var headerID = $("#header"); $(this).scroll(function() { if (!$(this).s ...

jqueryhtmlcss

In Wordpress, I am using Php to display posts. How can I create a new list item after every 3 posts, with each subsequent post displayed inside the new list item?

I am new to using PHP and feeling a bit confused with the code below, which is a team slider. In the <ul> tag, there is one <li> containing 3 nested <div>s (each representing a person). Can someone review my code and help me improve it? I ...

phphtmlcsswordpress

Executing JQuery code following an Ajax request

I'm struggling to make this part of my jQuery script work properly after the Ajax content switch... /*preventing right-click on images*/ $('img').bind('contextmenu', function(e) { return false; /*image rollover effect*/ $(&apo ...

jqueryajax

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

javascriptjqueryhtmlcssiframe

Maintain parental visibility with children when navigating to a different page

I am currently working on a vertical accordion menu that opens on hover, stays open, and closes when other items are hovered. The great assistance I received from @JDandChips has been instrumental in getting this feature up and running. Now, my main focus ...

javascriptjqueryhtmlcssjoomla2.5

Partial data is being received from the Ajax call

I currently have a textarea and a button on my webpage <textarea id="xxx" class="myTextArea" name="Text1" cols="40" rows="15">@ViewData["translation"]</textarea> <input type="button" id="convert-btn" class="btn btn-primary" value="Convert t ...

javascriptjqueryasp.netajaxasp.net-mvc

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

htmlcsssticky

CodePen displaying CSS errorsI'm having trouble getting my CSS

I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...

htmlcss

implementing a feature to save and showcase a list of preferred names using jquery/ajax without the

On my website, individuals have the ability to search for any name from around the globe. Users can add specific names to their favorites list, which they can view on a separate page containing all of the names added during their current session. I would ...

jqueryajaxdynamic

Omit the present page from the WordPress loop

I created a navigation system using basic HTML and Php. It's simple, but I am looking to do one of the following: Remove the current post from the loop so it doesn't show up Add a style change to indicate that it is the current page I have tri ...

phpwordpressloops

What's the best way to ensure that a select and button have consistent heights in Bootstrap 5?

Can I make a button and select element in the same row with Bootstrap 5 have the same height? https://i.sstatic.net/3S13Q.png <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" dat ...

csstwitter-bootstrapbootstrap-5

Storing a collection of objects in session storage

I've been struggling to save an array containing the items in my online shopping cart. Even though both the object and the array are being filled correctly, when I check the sessionStorage, it shows an array with an empty object. I've spent a lot ...

javascriptjqueryjsonsession-storage

Adjust the element colors within a Vue loop with dynamic changes

Hey there! I'm currently working on achieving a unique design inspiration that involves colorful badges grouped together. Here's a visual reference: In the image, you can see these badges grouped in pairs, but they can actually be in sets of 4 o ...

cssvue.jsnuxt.jsvuex

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

javascripthtmljquerycss

Unable to apply background-color CSS in playwright is not working as expected

I have been encountering an issue with applying the background-color CSS property in a Python template using the playwright package. I initially attempted to apply inline CSS style="background-color:red", then tried using a script tag with JavaScript, an ...

pythonhtmlcssplaywrightplaywright-python

Displaying personalized message post deletion of item from cart utilizing ajax in Woocommerce

For my current project, I am trying to find a solution that will display a custom message after completing an ajax action to remove items from the cart in woocommerce. Whether someone removes an item from the cart or clicks the 'undo' link, I nee ...

phpajaxwordpresswoocommerce

Adjust image source based on media query (CSS or JavaScript)

Is there a way to update the image src based on a media query with a maximum width of 515px? I'm considering using JavaScript, jQuery, or even AngularJS if there is an event equivalent to a CSS media query that can achieve this. I want to have differ ...

javascriptjqueryhtmlcssimage

Is it possible to implement a feature in Angular and Bootstrap where the toggle menu can be closed by clicking anywhere on the page, rather than just the toggle button

I'm working on an Angular project where I've implemented a navbar component. The navbar is responsive and includes a toggle button that appears when the browser window is resized. This button allows users to hide or display the menus. One issue ...

htmlcssangulartypescriptbootstrap-4

What is the best way to focus on a specific section of a CSS class name?

Successfully Working Example: HTML: <div class="items"> <div class="item">item 1</div> <div class="prefix-item-suffix">item 2</div> <div class="item">item 3</div> < ...

javascriptjquerycss

The accumulation of .ajaxComplete continues to grow

Something interesting has come to my attention. I implemented ajax in a carousel structure to dynamically add more items when needed, and it appears to be functioning correctly. Here is the ajax call located within a function named ItemLoad(): $.ajax({ ...

jqueryajax