What is the best way to toggle a sticky footer menu visibility using div elements with JavaScript instead of relying on pixel measurements?

Just wanted to mention that I'm pretty new to this, so if I use the wrong terms, I apologize in advance.

I am trying to replicate Morning Brew's sticky footer opt-in form (check it out here). However, the code I have now only tracks pixels. Is there a way for me to modify it so that it detects div tags instead?

<script>
  var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos < 4200 && prevScrollpos > 200) {
    document.getElementsByClassName("_form")[0].style.display = "block";
  } else {
    document.getElementsByClassName("_form")[0].style.display = "none";
  }
  prevScrollpos = currentScrollPos;
} 
</script>

javascripthtmljquerycss

Answer №1

If you want to detect when a user scrolls on the window, you can do so using the following method:

let footerElement = document.getElementById('footer');

  window.addEventListener('scroll', function(event){
    let scrollPosition = window.scrollY;
    console.log(scrollPosition);
    scrollPosition > 600 ? footerElement.style.display = 'block' : footerElement.style.display = 'none';
  })
body{
    height: 1600px;
}
<div id="footer">Footer Element</div>

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

Issue with alignment of inline elements

I recently added a more button to my share buttons, sourced from simplesharebuttons.com, with the intention of revealing less popular social media icons on smaller screens. However, I am encountering an issue where the button is not aligning with the rest ...

htmlcssalignment

Is it possible for me to convert the contents of a <div> into a rasterized image when printing?

I have been using jquery.printElement.js to print a custom calendar table that I created. The functionality inside a div is mostly working as expected, but I am facing some challenges with the CSS. Despite passing along all necessary .css files, my cells a ...

jqueryhtmlcssprintingrasterizing

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

css

Issues with the alignment of columns using Bootstrap framework

I've created a design in Photoshop using the Bootstrap 12-column guide, but when I try to implement it using Bootstrap, the results are completely off. https://i.stack.imgur.com/vQwOt.png Here's my HTML code: <!DOCTYPE html> <html lan ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How to Show a Div When Clicking using Javascript

Looking for a way to toggle the visibility of a div element on click and hide it when clicked anywhere else. window.addEventListener('load', function() { $$('a.tooltip').each(function(link) { var tooltip = document. ...

javascripthtmlonclick

How can I utilize inline jade.render() in Express with Jade template engine?

I am facing a challenge while attempting to utilize another team's jade template with Node's Jade. The template is quite intricate, featuring numerous mixins and other components. I have encountered an issue within one of the mixins that prevents ...

javascriptnode.jsexpresspugtemplate-engine

Is it possible to extract information from a string with regular expressions?

As I sift through a myriad of arbitrary "Header" data in node. Here's an example of what it looks like: _Aa:GA1.1.78037747.867108, 44907=5xyz; Webstorm-a36041d5=9fbb-48e9-b19e-e3f0a3282151; srce=coolernode; nsid=1234; cookie_data=T%3D1; _gat_PP= ...

javascriptnode.js

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

htmlcssnavbarpadding

Enabling or disabling dropdown lists within a gridview based on the selected value in a different dropdown list within the same gridview

Within my GridView, there are two dropdown lists: ddOnsiteOffsite and ddHours. My goal is to disable the ddHours dropdown if the selected text in ddOnsiteOffsite is "onsite". I've attempted to implement the following code snippet, but unfortunately, i ...

javascriptasp.netjquerydatagrid

Can the default jQuery mobile ajax loader be triggered automatically when making a $.post() call?

Similar Question: Displaying Spinner on jQuery Mobile Ajax Call Is there a way to automatically trigger the default jquery-mobile ajax loader when using $.post()? For example, can I set up a global configuration for this behavior? I came across this ...

jqueryjquery-mobile

Completing forms and tracking browser history when the document is ready

In my current webpage, I have code that automatically submits the form when the DOM is ready: $(function () { $('form').submit(); }); However, I've noticed that when a user clicks the back button on their browser on the next page, it t ...

javascriptjqueryhtmlformsbrowser-history

I designed my higher-order component to allow for dual invocations. How can I integrate Redux within this framework?

I have implemented my higher-order component (HOC) in such a way that it can be invoked twice, emphasizing the concept of "functional programming". However, I am facing challenges in connecting Redux to access state and certain functions. I would greatly ...

javascriptreactjsreact-reduxhigher-order-functionshigher-order-components

Using requestAnimationFrame to animate several independent objects

I'm currently working on animating two different objects: a square and a circle. Each object has its own button to initiate the animation, which involves moving the object from left to right. However, I've run into an issue where clicking on one ...

javascriptjqueryhtmlcssrequestanimationframe

Adjustable block with excess content

Forgive me if this question seems basic, but I'm not very familiar with CSS. I have a table with two columns that need to be equally sized and responsive when the page is resized. The header isn't an issue since it only contains a few words in ...

htmlcssoverflow

Transforming a jQuery menu into an active selection with Vue JS

I am looking to transition away from using jQuery and instead utilize Vue for the front end of a menu. Specifically, I need to add an active class and a 'menu-open' state to the appropriate nested list items, similar to what is achieved in the pr ...

javascriptjqueryvue.js

What sets apart using `: Interface` versus `as Interface` in Typescript?

I'm struggling to find the distinction between two similar lines of code due to uncertainty about what they are called. Consider the scenario where the following interface is defined: interface Person { name: string; age: number; } What exactly ...

javascripttypescript

The CSS :active selector glutton

Within a <div> element, I have an <img>. I would like the entire div to scale down by 10% (using transform) when clicked on. While I have achieved this effect, there is one minor issue: clicking on the image itself does not trigger the scaling, ...

htmlcssinternet-explorercss-selectors

How can I retrieve the attribute of the parent or highest level < li > when I am deeply nested within a nested unordered list in jQuery?

I'm trying to navigate up the tree menu of a nested unordered list to the topmost <li> and retrieve the "p_node" attribute using jQuery's toggle function. For example, when I click on "Annie", I want to get the root <li>, which is "mC ...

jqueryjquery-selectorshtml-lists

Use Jquery to iterate over the AJAX JSON response and add it to a collection of element identifiers

I have come across some similar inquiries, but none quite fit my needs. Currently, I am utilizing AJAX to obtain real-time updates on property availability. I have successfully received the response and can view it in the console log. However, I am unsure ...

jqueryajax

Angular Directive Fails to Execute Within ng-repeat Loop

In my current configuration, I have: App/Directive var app = angular.module("MyApp", []); app.directive("adminRosterItem", function () { return { restrict: "E", scope: { displayText: "@" }, template: "< ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat