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

A self-destructing javascript/jquery function that removes itself after running

Adjust the svg rate using jQuery or JavaScript

Basic draggable pop-up window using HTML5 for a seamless experience

Guide on how to style and arrange multiple checkboxes in both horizontal and vertical rows using CSS

Replace the content within the iFrame completely

What is causing the button on the update div to not respond when clicked after receiving a Jquery ajax response?

What is the process for integrating CSS-styled text into CKEditor?

Incorporate an XNA game directly into a website

When a div is covered by an if statement

Tips for making a horizontal grid layout with three items in each row

Refresh WebPage automatically after a Servlet successfully uploads and processes an image

Customize the drawer background in Vue Material

Display or conceal elements by utilizing ng-show/ng-hide according to specific conditions

Understanding the document.domain feature in Javascript

CSS: border-radius // background-color: white; rounded corners

Altering the text of dropdown items prior to the ASP.NET autopostback

Tips for creating a customized dropdown menu that opens upwards without relying on Bootstrap

The AJAX call returned undefined, leading to an error when trying to access the length property

Instructions on removing rows by using buttons within a JavaScript-generated table

Engaging with a remotely loaded HTML in a JQUERY UI Dialog