Locking element in place beneath precise browser width

Question

Locking element in place beneath precise browser width

Below is the script I am working with:

$(window).resize(function(){
if ($(window).width() >= 992){  

    var windw = this;

$.fn.followTo = function ( pos ) {
var $this = this,
    $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos){
        $this.css({
            position: 'static',
            top: pos,
            marginTop: 100


        });
    }
    else {
        $this.css({
            position: 'fixed',
            top: 100
        });
    }

});
};


 $('#bgForm').followTo(1550);    



}   
});

I am looking to prevent the position from being fixed when the browser size is below 992px. Is there a way to achieve this using my current script? I have attempted with the provided code, but the element gets stuck in position. Thanks in advance!

jquery css

Answer 1

Answer №1

It seems like you could achieve your goal with a CSS media query instead of using Javascript. Is there something specific you haven't mentioned in your question?

@media only screen and (max-width: 992px) {
    // These rules will only take effect when the 
    // browser window is less than 992px wide
}

Answer 2

It seems like you could achieve your goal with a CSS media query instead of using Javascript. Is there something specific you haven't mentioned in your question?

@media only screen and (max-width: 992px) {
    // These rules will only take effect when the 
    // browser window is less than 992px wide
}

Answer 3

Answer №2

According to @designedbyscott, implementing a media query seems like the most straightforward solution. However, in relation to your JS script inquiry, here is a streamlined approach. This version involves creating a function that assesses the window width and adjusts the position accordingly. The function is triggered on load, resize, and scroll events, though the final decision on event triggers is at your discretion. Simply replace 'your-element' with the specific element you wish to target.

function positionAdjust() {
  const element = $('.your-element');
  const width = $(window).width();
  const scroll = $(window).scrollTop();
  if (width >= 992 || scroll > 1550) {
    element.css('position','static');
    element.css('margin-top','100px');
  } else {
    element.css('position','fixed');
    element.css('top','100px');  
    element.css('margin-top','0');  
  }
}
window.addEventListener("load", positionAdjust);
window.addEventListener("resize", positionAdjust);
window.addEventListener("scroll", positionAdjust);

Answer 4

According to @designedbyscott, implementing a media query seems like the most straightforward solution. However, in relation to your JS script inquiry, here is a streamlined approach. This version involves creating a function that assesses the window width and adjusts the position accordingly. The function is triggered on load, resize, and scroll events, though the final decision on event triggers is at your discretion. Simply replace 'your-element' with the specific element you wish to target.

function positionAdjust() {
  const element = $('.your-element');
  const width = $(window).width();
  const scroll = $(window).scrollTop();
  if (width >= 992 || scroll > 1550) {
    element.css('position','static');
    element.css('margin-top','100px');
  } else {
    element.css('position','fixed');
    element.css('top','100px');  
    element.css('margin-top','0');  
  }
}
window.addEventListener("load", positionAdjust);
window.addEventListener("resize", positionAdjust);
window.addEventListener("scroll", positionAdjust);

Locking element in place beneath precise browser width

Answer №1

Answer №2

Similar questions

CSS - spacing anomaly among inline-block items

Having trouble getting Jquery to work with an Ajax call in the cart drawer. Any suggestions on how to resolve this issue

The code `$(body).css({'background-image':'url'}) is not functioning properly

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

Determine the aspect ratio of the image and incorporate it into the query string

How can jQuery be used to split a string and isolate the desired string in the center? For example, if we have a string like: sample_str[targeted_str][other_str

Stop flexbox list items from altering the width of their parent container when the children are hovered over

What steps do I need to take in order to implement a basic ZeroClipboard copy-to-clipboard feature in jQuery on jsFiddle with just one click?

Exploring the functionalities of jQuery and Local Storage: Understanding the Selector's various states

What is the process for customizing the color of the focused label in Material UI through styling?

We are hosting an event focused on DOM text selection outside of Input or TextArea elements

Having trouble passing a JavaScript variable through AJAX requests

Show the button's value on the text box using JavaScript

What is the best way to retrieve the checkbox value using AJAX/jQuery with a Spring form?

Ways to identify when a person has scrolled a specific distance

Deactivate the child division by the nth parent division

Choose the option for overseeing safaris

Transforming an image by masking it to create a binocular-like view

How can I use jQuery to display a larger image in a specific div when a thumbnail is clicked?

Elastic canvas to always match the full size of the container or screen