Emblem pointing towards the header

Seeking advice for modifying arrow function:

<script>
        $(window).scroll(function() {
    var pxFromBottom = 1300;
    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
        $('#nagore').fadeIn('slow');
    } else {
        $('#nagore').fadeOut('slow')
        }
    }); 
</script>

I am attempting to switch the distance calculation from bottom to top.

So, instead of 

pxFromBottom = 1300

I want it to be 

pxFromTop = 1300

However, after making this change, the functionality is not working as expected. Any suggestions on how to achieve this?

javascriptcss

Answer №1

Utilizing $(document).height() - pxFromBottom
can provide you with the relative position from the top of the page. This is essentially the same as the pxFromTop value itself, so by replacing that, it should function effectively:

$(window).scroll(function() {
    var pxFromTop = 1300;
    if ($(window).scrollTop() + $(window).height() > pxFromTop) {
        $('#nagore').fadeIn('slow');
    } else {
        $('#nagore').fadeOut('slow')
    }
});

Answer №2

This suggestion might be beneficial.

$(window).scroll(function() {
var pixelsFromTop = $(this).scrollTop();
 if (pixelsFromTop > 1300) {
   $('#notification').fadeIn('slow');
   } else {
     $('#notification').fadeOut('slow');
   }
});

Check out the live demo here

 .container{
  width: 100%;
  height: 2600px;
 }

#notification{
 display: none;
 background: #222;
 width: 50px; 
 height: 50px;
 position: fixed;
 bottom: 10px;
 right: 10px;
 border-radius: 50px;
}

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

The Ajax request is failing to execute properly on newly appended elements

My comment system allows users to post comments which are then appended to the existing ones. Whenever a user hovers over a comment, a 'delete' button appears. Clicking on the delete button prompts a confirm dialog and upon confirmation, an ajax ...

javascriptphpjqueryajax

Develop an interactive React sidebar with changing elements

I'm in the process of developing a sidebar for a project, with the goal of making it similar to tools like Confluence. This means that we need the ability to rearrange documents and create subdirectory structures by simply moving the documents, with ...

javascriptreactjstypescriptsidebarconfluence

Should position: absolute; be utilized in asp.net development?

I am just starting out in web development Would it be a good idea to utilize position: absolute; for controls? If not, can you explain why? ...

htmlcss

Playing a game of tic tac toe on Discord (javascript) with classes is fun at first, but then suddenly malfunctions in a strange manner

I'm relatively new to javascript and programming in general. I've been working on creating a Discord bot for my server that allows users to play tic-tac-toe against each other. Due to my limited understanding of javascript and how this game shou ...

javascriptnode.jsclassdiscord.jstic-tac-toe

What are some solutions for repairing unresponsive buttons on a webpage?

My task is to troubleshoot this webpage as the buttons are not functioning correctly. Here’s a snippet of the source code: <!DOCTYPE html> <html lang="en"> <head> ... </head> <body> <div id="container" ...

javascripthtmlcssbarcode

Display issue with ThreeJS cube

Currently, I'm delving into the world of ThreeJS and decided to incorporate the library into my existing NextJS project. My goal was simple - to display a cube on the front page. However, despite my best efforts, nothing seems to be appearing on the s ...

javascriptreactjsnext.jspythreejs

What could be causing useEffect to trigger only after the component has been mounted in NextJS?

I'm currently encountering an issue with my implementation of a useEffect function that is supposed to act like a componentWillMount, but the behavior is not as expected. Within the code for Component (as demonstrated in the Codesandbox provided belo ...

javascriptreactjsnext.js

The carousel in the Project file seems to be malfunctioning

Having previously utilized Owl carousel on my website, I made the switch to slick carousel for the slider on a NATA coaching center in Chennai. Unfortunately, I'm encountering issues with getting the slider to work and I'm unsure of where I may b ...

javascripthtmlcssbootstrap-4

Create unique names by merging a selection of words

I'm looking to create a feature where users can input 2 or 3 words into text fields, and upon submission, those words will be combined in various ways. It's similar to a business name generator where you enter words and receive potential business ...

javascriptjqueryjsonformsbackbone.js

Encountering an unexpected end of input error while making an API call using the fetch()

I'm looking to transition an API call from PHP to Javascript for learning purposes. Unfortunately, I can't make any changes on the API side as it's an external source. When attempting to use fetch() due to cross-origin restrictions, my scrip ...

javascriptjqueryjsonapi

Guide to modifying the text color of a Primefaces/jqPlot line chart:

I've implemented a basic JSF line chart with PrimeFaces (using jqPlot library) in my project: <p:lineChart id="linear" value="#{team.chart}" title="Lap Times" xaxisLabel="Lap" yaxisLabel="Time ...

cssjsfprimefacesjqplot

The text on my website is experiencing a cropping issue on the right side

I'm having an issue where the right side of all the text on my website is being cut off. I've tried using Firebug to inspect the element, but it's always a paragraph text and they have different parent divs. I'm not sure what CSS adjust ...

htmlcsswordpress

Is there a way to void a delayed input event?

After reading this How to delay the .keyup() handler until the user stops typing? post, we have grasped how to implement delays. However, is there any suggestion on how to cancel a delayed event? Take a look at this In the scenario given, I want nothing t ...

javascripthtmlcsstimerdelay

Diving Div Floating

I've been working on this code snippet for quite some time, but I can't seem to find a solution that keeps the two div elements horizontal when resizing the browser window. <!DOCTYPE html> <head> <style> #ONE { ...

htmlcss

adjusting the header position for an HTML anchor

I'm in the process of improving the functionality of my anchor links. I have a fixed header at the top of my page, so when you click on an anchor link elsewhere on the page, it jumps to that position with the anchor aligned at the top, leaving the fix ...

javascriptjqueryhtmlcss

Having difficulty accessing the API response accurately

The response from my API is as follows: {"__v":0,"short":"8xdn4a5k","_id":"5404db5ac27408f20440babd","branches":[{"version":1,"code":""}],"ext":"js","language":"javascript"} When I use this code, it works perfectly: console.log(response.short); However ...

javascriptnode.jsexpress

I seem to be overlooking something. The calculation is not displaying in the designated field

Having trouble with my area calculator - the area field is not updating as expected when I enter numbers in each field. Any advice on what might be missing? function calculateArea() { var form = document.getElementById("calc"); var sLength = parseFl ...

javascripthtmlcalculatorarea

Include performers in a roster for DVD collection

Currently, I am facing an issue with adding multiple actors to a DVD object. Despite my efforts to use JavaScript to dynamically create text boxes for each actor, only the first one is being saved. Do you have any advice or suggestions on how to resolve th ...

javascriptc#asp.netasp.net-mvc

Does 1 CSS point amount to the same as 75% of a CSS Pixel?

Can anyone help clarify the relationship between CSS pixels and CSS points in modern web design? I've come across information stating that one CSS point is equivalent to 3/4 of a pixel. Is this accurate? Also, is it true that we can disregard the old ...

htmlcsspixelunits-of-measurement

Choose a selection from the options provided

This is a sample for demonstration purposes. I am trying to display an alert with the message "HI" when I click on Reports using the id main_menu_reports. My attempted solution is shown below. <ul class="nav" id='main_root_menu'> & ...

javascriptjqueryhtml