Use body height set to 100% to measure the scrollTop distance

I am faced with a challenge on my webpage where I need to adjust the height due to scrolling elements, while also detecting the scrollTop() distance to apply some CSS to the navigation bar. Despite setting the body's height to 100%, it appears that I am unable to accurately determine if the scrollTop has reached a certain threshold.

The following JavaScript code is what I can't seem to make work:

$(window).scroll(function() {
  if( $(window).scrollTop() > 175 ) {
    $('.navbar').css("box-shadow", '0 10px 12px rgba(0,0,0,.175)');
  } else {
    $('.navbar').css("box-shadow", '');
  }
});

CSS:

[canvas=container] {
    width: 100%;
    height: calc( 100% - 100px );
    margin-top: 100px;
    overflow-y: auto;
    overflow-x:hidden;
    position: relative;
    background-color: white; /* Basic background color, overwrite this in your own css. */
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}

The issue arises when I set the height on the body (canvas) as the event does not trigger. However, setting the body height is necessary. Is there any workaround that would allow me to maintain the body height and still detect the scrollTop() distance effectively? Any assistance would be greatly appreciated. Thank you.

Answer №1

It is important to measure the scrollTop on the actual scrolling element, not just the window.

$("[canvas='container']").scroll(function() {
  if ($(this).scrollTop() > 175) {
    $('.navbar').css("box-shadow", '0 10px 12px rgba(0,0,0,.175)');
  } else {
    $('.navbar').css("box-shadow", '');
  }
});

(The selector in the code might not be correct as it references a "canvas" attribute which seems unusual. Please use the appropriate selector for the scrolling element.)

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

Using jQuery to dynamically insert HTML content into a struts 2 web

In my Struts 2 webapp, I have successfully implemented the jQuery plugin for a form. However, I am facing an issue on certain pages where I reload divs based on user interactions using custom JavaScript functions like the one below: function doWhatever() ...

Save JSON data in an HTML document or vice versa

Hey there, the title of this post might seem a bit unclear but I couldn't think of another way to phrase it. So here's the dilemma: I have some data that is JSON encoded and stored in a .json file: {"foo":"bar", "bar":"foo", "far":"boo"} Additi ...

Aligning a div element horizontally

I'm having trouble aligning the div element with the .slider class horizontally. The margin: 0 auto; property doesn't seem to be working. Additionally, I would like to know how to make the slider image responsive. /* CSS Document */ .header { ...

Send back a JsonResult containing a collection of objects from an MVC controller

In my MVC controller, I have a straightforward method: [HttpPost] public JsonResult GetAreasForCompany(int companyId) { var areas = context.Areas.Where(x => x.Company.CompanyId == companyId).ToList(); return Json(areas); } Here is the structure ...

What is the best way to get rid of a tooltip from a disabled button

I am facing an issue with my button that is disabled using ng-disabled. The problem is that the button still shows a tooltip even when it is disabled. I need to find a way to remove the tooltip when the button is disabled. Check out my Button ...

JavaScript providing inaccurate height measurement for an element

Upon loading the page, I am trying to store the height of an element. To achieve this, I have utilized the jQuery "ready" function to establish a callback: var h_top; var h_what; var h_nav; $(".people").ready(function() { h_top = $(".to ...

Issue with preventdefault() function in Internet Explorer 8

I've encountered a problem while working on a page that heavily utilizes ajax. Everything seems to be functioning well across different browsers, except for one final step that is broken in IE8 and below. You can view the issue on this demo page: To ...

Obtaining the names of actions and controllers dynamically using JQuery

To retrieve JSON response from the controller, I utilized the code snippet below. I am considering turning this into a reusable function that can be implemented across all views. How can I dynamically pass the url parameter? $.ajax({ type: 'POST& ...

Creating page borders in print CSS for each individual page is a helpful way to enhance the visual appeal

I am facing an issue where I have a lengthy HTML document that is ready for printing, but I need to add borders to every page. I tried adding body { border:2px #666 solid; padding:5px; } in the CSS code, which looked good in the HTML view, but not in the p ...

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...

Creating a responsive card design with Material UI

Creating a responsive card layout for mobile applications is my current challenge const styles = { edit: { width: "40%", marginLeft: 270, background: "#76ff03" }, add: { width: "100%", background: "#18ffff", size: "large" ...

Angular dynamically selects a dropdown option when the page is loaded

Check out this dropdown example: <div class="col-md-6"> <div class="form-group> <label class="control-label">Role</label> < ...

Browsing through the last items on a webpage

I have set up a jsfiddle that explains itself quite well: http://jsfiddle.net/nt7xzxur/ with the following smooth scrolling code: function smoothScroll(hash) { $('html, body').animate({ scrollTop: $(hash).offset().top }, 750); By clicking o ...

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

Unable to load variables into site.css in order for Flask app to successfully render home.html

I'm encountering difficulties in getting my site.css file to accept two variables passed in from my app.py using Jinja2 templates, namely {{ variable }}. In app.py, I have defined two variables named empty_fill_line and fill_line, which dynamically up ...

Display words on screen and then alter hue using HTML and CSS

Is there a way to dynamically change the color of text inside <a> tags from black to red after a specific time interval and keep it permanently red? do { document.getElementById("code").innerHTML +="<a>Hello World</a><br>"; awa ...

When utilizing state in ReactJS to modify the color of my button, the change does not take effect on the first click. How can I troub

Whenever I click the button that routes to different locations via an API, the route works fine but the button color doesn't change on the first click. To address this issue, I implemented the useState hook and CSS to dynamically change the button co ...

Issues encountered with making JSONP requests

Hey there, I'm a bit stuck and need some help figuring out what's going wrong. Sometimes a fresh perspective can make all the difference. So, here's the situation: I'm making a JSONP request using jQuery from one domain () to a PHP scri ...

Which method proves to be quicker: storing data on a DOM element with a class attribute, or using jQuery data?

In my application, I have a render loop that constantly updates the appearance of several DOM elements based on data fetched from an external source. Each element needs to have presentational classes applied according to this data. For example: var anima ...

Tips for keeping a div centered even when the window is resized to smaller than the background width

I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image ...