The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

I'm facing an issue with two scripts on my website - when they are separate, they work perfectly fine but together, they don't seem to function properly. What could I be missing here?

Script 1:

window.onscroll = function() {myFunction()};

var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky");
  } else {
    navigation.classList.remove("sticky");
  }
}

Script 2:

mybutton = document.getElementById("tothetop");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 98 || document.documentElement.scrollTop > 98) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

I am unable to figure out why they do not seem to work harmoniously together.

javascriptcssscrolltop

Answer №1

To change the onscroll function, simply make a double declaration

window.onscroll = function() {myFunction()}; // this will get replaced

window.onscroll = function() {scrollFunction()}; // this will be the only one called

Consider trying:

window.onscroll = function() {
  myFunction();
  scrollFunction();
}

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

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

jqueryhtmlcss

Using Jquery to handle different status codes in an Ajax request

Currently, I am handling statusCode of 200 and 304 in a jQuery Ajax call. Additionally, I have defined an "Error" function to catch any errors that may occur. If a validation message is related, we specify the status code as 400 - Bad Request. In this sc ...

javascriptjqueryajaxhttp-status-codes

What could be causing a functional component's child component to be using stale props?

I am currently working with Next JS, but the process is similar. I have refined the code and eliminated irrelevant parts. My goal is to create a form where new fields (child components) can be added dynamically. The default setting will be 1 field, with a ...

javascriptreactjsnext.js

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

Utilizing a React hook to render and map elements in a function

Can the hook return function be assigned to a render map in React? In this example, we have the socialAuthMethodsMap map with the onClick parameter. I tried to assign the signInWithApple function from the useFirebaseAuth hook, but it violates React's ...

javascriptreactjstypescriptfirebasereact-hooks

Converting objects into an array of arrays: A Step-by-Step Guide

My attempts have not yielded the desired outcome Object.keys(data).forEach(function (key) { console.log(data[key]); array = $.map(data[key], function(value, index) { return [value]; }); }); The output I encountered is - 0:{1: 2, 2: ...

javascriptangularjs

Eliminate the alert message that appears when dynamically rendering a React styled component

When checking the browser console, I noticed a warning that reads as follows: react_devtools_backend.js:3973 The component styled.div with the id of "sc-dmRaPn" has been created dynamically. You may see this warning because you've called sty ...

javascriptreactjstypescriptnext.jsstyled-components

What could be causing the AngularUI bootstrap datepicker to not appear?

Exploring the popup datepicker demo from angularUI bootstrap, which is embedded in their page and works perfectly. However, when I tried to create a minimal plunker here, the button click does not open the calendar. Any thoughts on what might be causing th ...

javascripthtmlangularjsangular-ui-bootstrap

Processing hover attributes in Tailwind-styled-components

I'm currently working on a website that features a dark mode, and I want to utilize the dark prop in tailwind-styled-components. The props work fine in all instances except for actions like hover, active, focus, etc. When attempting to use hover and t ...

javascriptreactjsnext.jstailwind-cssstyled-components

Modify the color scheme of the parent div by selecting the child div (using only CSS and HTML)

I am working with a nested div structure, where one is contained inside the other: <div class="outer"> <div class="inner"> </div> </div> It looks something like this: I am wondering if it's possibl ...

htmlcss

I am looking to retrieve products based on category alone, category and model together, or simply obtain all products in one go. At the moment, I am utilizing three distinct endpoints

I have 3 endpoints on my backend that fetch products based on certain criteria. I'm considering whether to refactor the logic and combine them into a single endpoint/function. Currently, my routes are structured as follows: router.get('/products& ...

javascriptnode.jsexpress

transferring a delicious cookie to the browser

I have successfully integrated a basic login system using angular, express, and passport.js into an existing project by following the file structure and coding standards provided in angular-passport. Currently, users can sign up and log in without any iss ...

javascriptnode.jsexpresspassport.js

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Having an issue on this specific page where I keep encountering a 'jQuery is not defined' error in both Chrome and IE because of the jQuery placeholder script. The declaration of jQuery comes before the plugin script. Checked for any conflicts ...

javascriptjqueryhtml

Is there a way to incorporate expandable content on a Drupal node page using Javascript?

Is there a Drupal Module available that can display a trimmed version of content on the node page and expand it when clicking on a "Read More" link? Thank you! ...

javascriptjquerydrupaldrupal-7teaser

Enhance your Next.js routing by appending to a slug/url using the <Link> component

In my Next.js project, I have organized my files in a folder-based structure like this: /dashboard/[appid]/users/[userid]/user_info.tsx When using href={"user_info"} with the built-in Next.js component on a user page, I expect the URL to dynamic ...

javascripttypescriptnext.js

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

Looking to craft a regex that can identify all periods not enclosed in quotes and not followed by a '<'. This is for the purpose of converting text into ssml (Speech Synthesis Markup Language). The regex will be utilized to automatically inse ...

javascriptregex

Form Validation behaving differently than anticipated

I have created a custom shopping cart system using PHP and implemented validation with JavaScript, but the validation process is not functioning as expected. Here is a snippet of my PHP script: $result = mysqli_query($conn, "SELECT * FROM products"); whi ...

javascriptphpjqueryvalidation

TinyMCE's Textarea is blank and not displaying any content

I can't seem to figure out where I went wrong with using TinyMCE. I downloaded it from and chose version 4.0.3. After downloading, I ended up with a folder called tinymce_4.0.3 which contained subfolders like tinymce_4.0.3\tinymce\js\t ...

javascripthtmltinymce

Send users from the web (using JavaScript) to the Windows Phone app, and if the app is not installed, direct them

In the following code snippet, I am using angular.js to detect the mobile platform and redirect to the native app. If the app is not installed, it will redirect to the market: $scope.isMobile = { Android: function() { return navigator.userAgent.ma ...

javascriptangularjswindows-phone-8

Transforming the primary image to the thumbnail image when hovering over it with JSON objects

Currently, I am facing an issue with my single-page web application project that involves using jQuery, JSON Bootstrap. So far, I have successfully created a category page, product selection page, and item page. The problem arises on the item page where ...

javascriptjqueryjsonajaxbootstrap-4