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

Enabling drag and drop functionality for elements in Yii2

I am looking to create draggable elements in a Yii2 advanced application. I have tried using PHP and HTML examples similar to http://jqueryui.com/draggable, but so far it has not been successful. Can anyone provide assistance? Below is the code from the vi ...

phpjqueryyii2jquery-ui-draggable

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

A guide to using Jquery animate for animating elements when a link is clicked or when the page loads

When you first land on ljessett.hndcomputing.net/lewis, the homepage appears static. To activate animation on the page, simply click on the home button. How can I replicate this animated effect every time a link is clicked? The dynamic content of the pag ...

jqueryjquery-animate

Setting the line-height property in CSS to a value greater than the font-size property

Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height. Check out this simple example featuring a classic movie: HTML: <img src="http://cf2.imgobject.com/t/p/w92/wcI ...

htmlstylescsstext-size

Showing nested div elements in a single row

I'm currently dealing with a react component that generates nested divs. My goal is to make sure all the divs are displayed on the same line, but the catch is I can only apply styles to the outermost container div. Is there a way to achieve this witho ...

htmlcssreactjs

`Is there a way to modify the attribute text of a JSON in jQuery?`

I'm attempting to modify the property name / attribute name of my JSON object. I attempted it like this but nothing seems to change. After reviewing the input JSON, I need to convert it to look like the output JSON below. function adjustData(data){ ...

javascriptjquery

Top pick for building drag-and-drop web applications: the ultimate JavaScript library

Up to this point, I've relied on jQuery UI's draggables and droppables for my projects. However, I recently came across ExtJS and other libraries that caught my interest. I am aiming to create a professional-grade plugin. Can anyone suggest the b ...

javascriptjqueryjquery-uiextjs

An error is triggered by serializing a TinyBox POST form into an Array

When I implemented the code below, it performed as anticipated: TINY.box.show({url:target, post:$("form[name='currentSearch']").serialize(), width:650, mask:true, close:true, maskid:'boxMask', boxid:'popupBox', openjs:funct ...

javascriptjqueryajaxpost

Problems revolving around the fundamental CSS drop-down menu concept

I'm struggling to center a CSS drop-down menu on my webpage without causing the drop-down effect to break. No matter what I try, it seems to mess up. What am I missing? Snippet of code: html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,b ...

cssdrop-down-menucentering

Ensuring Proper Alignment of Headers in CSS

I'm struggling to align my header correctly. Despite getting close in Internet Explorer, it looks terrible in Firefox with the code below. I've scoured forums for solutions but the more I try to fix it, the worse it looks. All I want is for heade ...

htmlcsshtml-table

Removing Filter Widget from Tablesorter

Can anyone provide guidance on how to disable the filter widget without affecting tablesorter, and then re-enable it without the filter widget? I'm looking for a more efficient solution than what I currently have. <a href="#" data-active="1" class ...

jquerytablesorter

Text input setting for jQuery UI Slider

Currently, I am utilizing jQuery UI sliders to input values in text boxes. However, I would like this functionality to be bidirectional; meaning if a value is entered into the text box, I want the slider to move to the corresponding position. I am unsure ...

javascriptjqueryjquery-ui

Amending the Access-Control-Allow-Origin setting to enable the proper functioning of Jquery's load() function

SITUATION: Our internal web site is hosted on a web server. We also have SharePoint running on a separate internal web server. Both are within the company.com internal domain, with different sub domains accessed via SharePoint.company.com and internalWeb ...

jqueryajaxcors

Create a Bootstrap modal that includes a checkbox option to prevent it from appearing again in

I am attempting to display a bootstrap modal upon body load based on a value retrieved from a MySQL database. The bootstrap modal is included in the body and shown successfully depending on the database value using the following code snippet: $results ...

phpjqueryajaxtwitter-bootstrapbootstrap-modal

Finally, $.getJSON has been triggered

When I click on an element, I want to open a bootstrap modal. The modal contains values retrieved from an ajax call using getJSON. However, the issue is that the getJSON function is only called after the jQuery function has finished executing. Below is my ...

javascriptjqueryajaxjsontwitter-bootstrap

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...

htmljquerycss

What is the best way to rate a particular image?

while ($row = mysqli_fetch_array($result)) { echo ""; echo "<div id='img_div'>"; echo "<i class='fas fa-times'></i>"; echo "<img class='photoDeGallery' s ...

javascriptphpjquerycssajax

Tips for creating a smooth scrolling header menu on a standard header

<script> $(document).ready(function(){ $(".nav-menu").click(function(e){ e.preventDefault(); id = $(this).data('id'); $('html, body').animate({ scrollTop: $("#"+id).o ...

javascripthtmljquery

I must create a dropdown and lift up feature similar to the one provided in the example

I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...

javascriptandroidjqueryhtmlcss

Trouble arises in next.js containers when their content exceeds the specified limits due to @media rules adaptation

I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial. The problem revolves around three layers (as seen in t ...

cssflexboxnext.jsresponsive