Modify CSS when scrolling, based on the size of the screen

Question

Modify CSS when scrolling, based on the size of the screen

I've implemented this JQuery script to modify elements in my header as the user scrolls. Is there a way to limit these modifications based on the screen size?

Here's the code snippet:

$(window).scroll(function() {

    // Once the user has scrolled 100px from the top...
    if ( $(window).scrollTop() >= 10 ) {
        $('#scrollthing').css('display', 'none');
        $('#ticket-amount').css('margin-bottom', '15px');

    // Otherwise, remove any inline styles to revert back to the original design
    } else {
        $('#scrollthing').attr('style', '');
    }
});

Appreciate your help!

jquery html css scroll

Answer 1

Answer №1

To obtain the dimensions of the viewing area:

var viewAreaWidth = $(window).width();
var viewAreaHeight = $(window).height();

When the page is resized:

$(window).resize(function() {
      // Perform necessary actions upon resize
      if($(window).width() < 405 )
         // Do something here
});

Answer 2

To obtain the dimensions of the viewing area:

var viewAreaWidth = $(window).width();
var viewAreaHeight = $(window).height();

When the page is resized:

$(window).resize(function() {
      // Perform necessary actions upon resize
      if($(window).width() < 405 )
         // Do something here
});

Answer 3

Answer №2

Here is the code snippet you requested.




$(window).scroll(function() {
// check if window width is less than 400 and scroll top is greater than or equal to 10
if ($(window).width() < 400 && $(window).scrollTop() >= 10) {
// make your changes here
}
else { 
// else condition for when the if statement does not apply
}
});

This implementation may not be the most efficient for performance, but it should get the job done. You can consider wrapping it in a document ready function if needed.

Answer 4

Here is the code snippet you requested.




$(window).scroll(function() {
// check if window width is less than 400 and scroll top is greater than or equal to 10
if ($(window).width() < 400 && $(window).scrollTop() >= 10) {
// make your changes here
}
else { 
// else condition for when the if statement does not apply
}
});

This implementation may not be the most efficient for performance, but it should get the job done. You can consider wrapping it in a document ready function if needed.

Modify CSS when scrolling, based on the size of the screen

Answer №1

Answer №2

Similar questions

Personalize the styling of Material UI Tables - final element customization

Ensuring Consistent HTML5 Page Layout Across Various Browsers Using CSS

Submitting a form without uploading a file in Spring MVC: A step-by-step guide

Anti-aliasing with @font-face in Internet Explorer versions 7 through 9

What is the best way to trigger ajax when the user clicks the back button to return to the previous webpage?

Utilizing the Filter function to extract both the content contained within a class and the class itself

Event not tracking properly due to missing label in GA event firing

"Addressing the issue of white space between the status bar and header in Cordova

An instructional HTML/JS dialogue for a linked page

Adjustable div heights for text within inline elements

Hide object scroll percentage with CSS styling

Master the art of crafting precise searches with Js and Jquery

How can I make col-8 and col-4 display next to each other?

Creating a centered arrow using CSS within boxes

Struggling to effectively customize a bootstrap theme

The navigation bar is failing to display all of the titles

How to add an hr tag to a div element in HTML dynamically with JavaScript?

Django and Ajax working together with GET requests

How can I update the color of table rows after the ng-repeat has been implemented?

The JSON.parse function encounters an error in Chrome, but functions properly in Firefox