Applying style changes to the height on scroll event in Javascript for Chrome, Firefox, and Internet Explorer

I am working on triggering an event when scrolling to a specific height. I have code that successfully adds a style in Chrome, but it is not functioning properly in IE. Can anyone provide assistance?

myID = document.getElementById("subnav");
var myScrollFunc2 = function() {
  var y = window.scrollY;
  if (y >= 150) {
    myID.className = "subnav stick";
  } else {
    myID.className = "subnav unstick";
  }
};
window.addEventListener("scroll", myScrollFunc2);
.subnav {
  width: 100%;
  z-index: 100;
  background-color: #ffffff;
}

.stick {
  top: -62px;
  position: fixed !important;
}

.unstick {
  position: relative !important;
}
<div id="subnav">123</div>

javascripthtmlcss

Answer №2

While browsing on SO, I stumbled upon a helpful answer.

var scroll = 
    window.scrollY // Latest Method (Chrome, Firefox)
 || window.pageYOffset // (Recent IE, like IE11)
 || document.documentElement.scrollTop // (Older IE, 6,7,8)

Special thanks to the contributor at this particular SO page

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

How can you combine accessibility with absolute positioning?

Have you seen our unique hamburger design? https://i.stack.imgur.com/AmT6P.png A simple click will reveal a neat popup (the class "open" is added to a div). https://i.stack.imgur.com/yPydJ.png This cool effect is achieved using fixed positioning, but i ...

htmlcssaccessibilitywcagwcag2.0

Using AngularJs to implement a $watch feature that enables two-way binding

I am in the process of designing a webpage that includes multiple range sliders that interact with each other based on their settings. Currently, I have a watch function set up that allows this interaction to occur one way. However, I am interested in havi ...

javascriptangularjs

implementing static routing and user authentication in an Express application

I'm having trouble implementing the following: All requests should serve files from the /public folder. (e.g. -> /public/docu/index.html) If the user is not authorized, they should be redirected to the "oauth/login" route. Here is what I'v ...

javascriptnode.jsexpress

Saving the index.html file to disk when the button is clicked

Is there a way to export the current HTML page to a file? I have attempted to achieve this using the following code, but it only works when the page is loaded and not with a button click. <?php // Start buffering // ob_start(); ?> <?php file_pu ...

javascriptphphtmljqueryajax

Acquire the selected option's value and display it within a div container

Is there a way to extract and display only the price value (after the " - ") within a div with the id of "price", updating as the select element is changed? <select id="product-select" name=""> <option value="1">Product Name / Yellow / S - ...

javascriptjquery

Keep HTML in sync across browser and server

Is there a way to efficiently update a large unordered list in a web application without sending the entire list over the network or resorting to pagination, while ensuring it stays synchronized with a memoized server-generated copy? ...

htmlajaxsynchronization

Getting the ID name from a select tag with JavaScript - A quick guide!

Can you help me retrieve the id name using JavaScript when a selection is made in a select tag? I have tried running this code, but it only alerts undefined. For instance, if I select bbb in the select tag, I should be alerted with 2 Any suggestions on ...

javascripthtml

Transform your .obj files into .glb files effortlessly with npm and Laravel

I've hit a roadblock for 2 days now and can't seem to find a solution. Could someone lend me a hand with this? Query: What's the best way to convert a .obj file to .glb? I attempted using obj2gltf npm package but integrating it with Larav ...

javascriptphpnode.jslaravelnpm

What is the process for configuring the global warning level in ESLint?

My current setup involves using WebStorm and the ESLint configuration provided by Airbnb. I'm curious if there is a way to have ESLint errors displayed in a more subtle manner instead of the harsh red color, or perhaps make all ESLint rules warnings ...

javascriptintellij-ideawebstormeslinteslint-config-airbnb

I wish to have the option to choose a courseId when creating a new hole by clicking the "create new hole

I'm currently developing a golf score tracking application. I have set up a database with tables for Rounds, Courses, and Holes. The Hole table contains a foreign key that links to the CourseId, allowing me to associate each hole with a specific cour ...

c#htmlasp.net-mvcentity-framework

Addressing a jquery.ajax relative path problem

I am a newcomer to this topic and I have been researching extensively online for more information. I would like some further insight into the following issue: I am attempting to retrieve a JSON file located one level down from the directory where `index.h ...

jqueryhtmlajax

Creating a dynamic method to set data for a stacked bar chart in chart.js

In the following code snippet, you can see how my stacked bar chart is rendered using Angular: <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]=" ...

javascriptangularchart.jschart.js2

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

htmlcss

Exploring AngularJS's Unique Features: Isolated Scope and Controller Connection

Currently, I am diving into Angular and endeavoring to develop a Phone Message Log application utilizing directives. The concept is simple - the user inputs a message, clicks a button, and it gets displayed in a "Message" log below. The challenge I'm ...

javascriptangularjs

Cleaning up objects from memory in JavaScript following an AJAX request

I am developing a web application with dynamic content loading. In my code, I have a main container div (<div id="container"/>) where I use AJAX to load HTML content. // function overwritten by loadMenu functions // called before loading a new sect ...

javascriptperformancememory-leaks

How to include a key-value pair to a JSON object within an array using JavaScript

I am looking to include the following functionality in the JSON data provided below: "Check if the key name default exists, and if it does, add another key within the same object => ("pin" : 91)." I have attempted to achieve this using the code snippet ...

javascriptjsoncrud

Error occurs with Nodemon application crashing while executing Gulp command

Recently, my React app started crashing whenever I run the Gulp command. Oddly enough, it was functioning perfectly just a few hours ago. The only change I made was updating my node version from 6.2.1 to 6.2.2 in order to deploy the application on Azure. H ...

javascriptnode.jsreactjsgulpnodemon

Unable to locate the value of the query string

I need help finding the query string value for the URL www.example.com/product?id=23 This is the code I am using: let myApp = angular.module('myApp', []); myApp.controller('test', ['$scope', '$location', '$ ...

javascriptangularjs

I am interested in creating a class that will produce functions as its instances

Looking to create a TypeScript class with instances that act as functions? More specifically, each function in the class should return an HTMLelement. Here's an example of what I'm aiming for: function generateDiv() { const div = document.crea ...

javascripthtmltypescript

Ways to calculate a cumulative total on a web form using javascript

Below is the structure of a form: <form id="calculator" action="#" method="get"> <h1>Cake Cost Estimator</h1> <h3>Round Cakes:</h3> <fieldset id="round"> <table> <tr> ...

javascriptjqueryhtml