Turn off sticky sidebar feature for mobile-friendly layout

Question

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected.

<script type="text/javascript">
$(function(){ // document ready
    if ($('#sidebar').length) { // ensure existence of "#sticky" element
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns a number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
            var limit = $('#img1').offset().top - stickyHeight - 15;

            var windowTop = $(window).scrollTop(); // returns a number

            if (stickyTop < windowTop){
                el.css({ position: 'fixed', top: 0 });
            }
            else {
                el.css('position','static');
            }

            if (limit < windowTop) {
                var diff = limit - windowTop;
                el.css({top: diff});
            }
        });
    }
});
</script>

javascript jquery css

Answer 1

Answer №1

To obtain the dimensions of the viewport using jQuery:

var viewWidth = $(window).width();
var viewHeight = $(window).height();

In this scenario:

 if($(window).width()>=768){
//Insert your script code here, which will only be executed if the viewport width is 768 or greater (adjust value as needed)
}

Answer 2

To obtain the dimensions of the viewport using jQuery:

var viewWidth = $(window).width();
var viewHeight = $(window).height();

In this scenario:

 if($(window).width()>=768){
//Insert your script code here, which will only be executed if the viewport width is 768 or greater (adjust value as needed)
}

Answer 3

Answer №2

Consider utilizing modernizr for this purpose as it offers a wide array of feature detection techniques, particularly for touch devices such as mobiles.

To start, include modernizr like so:

https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js

Then, integrate your function/javascript code within modernizr, such as:

if(!Modernizr.touch){ 

    $(function(){ // document ready
        if ($('#sidebar').length) { // ensure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
   }
});        

}

This setup will be activated in the absence of a touch device.

Answer 4

Consider utilizing modernizr for this purpose as it offers a wide array of feature detection techniques, particularly for touch devices such as mobiles.

To start, include modernizr like so:

https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js

Then, integrate your function/javascript code within modernizr, such as:

if(!Modernizr.touch){ 

    $(function(){ // document ready
        if ($('#sidebar').length) { // ensure "#sticky" element exists
        var el = $('#sidebar');
        var stickyTop = $('#sidebar').offset().top; // returns number
        var stickyHeight = $('#sidebar').height();

        $(window).scroll(function(){ // scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // returns number

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
   }
});        

}

This setup will be activated in the absence of a touch device.

Answer 5

Answer №3

<script type="text/javascript">
$(function(){ // Ensuring the document is ready

 // Detecting device width using screen.width and executing code for devices greater than 767 pixels (such as iPad) or based on specific requirements

if ($('#sidebar').length && screen.width > 767 ) { // Checking if "#sticky" element exists
    var el = $('#sidebar');
    var stickyTop = $('#sidebar').offset().top; // Getting the top offset value
    var stickyHeight = $('#sidebar').height();

    $(window).scroll(function(){ // Handling scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // Storing the current scroll position

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
}
});
</script>

Answer 6

<script type="text/javascript">
$(function(){ // Ensuring the document is ready

 // Detecting device width using screen.width and executing code for devices greater than 767 pixels (such as iPad) or based on specific requirements

if ($('#sidebar').length && screen.width > 767 ) { // Checking if "#sticky" element exists
    var el = $('#sidebar');
    var stickyTop = $('#sidebar').offset().top; // Getting the top offset value
    var stickyHeight = $('#sidebar').height();

    $(window).scroll(function(){ // Handling scroll event
        var limit = $('#img1').offset().top - stickyHeight - 15;

        var windowTop = $(window).scrollTop(); // Storing the current scroll position

        if (stickyTop < windowTop){
            el.css({ position: 'fixed', top: 0 });
        }
        else {
            el.css('position','static');
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({top: diff});
        }
    });
}
});
</script>

Turn off sticky sidebar feature for mobile-friendly layout

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible to store an HTML element tag in a variable?

Angular directive does not focus on the text box

What is the best method for globally configuring the Angular moment timezone?

I am having trouble getting my dropdown to line up with the drop button labeled "MORE"

Tips for creating CSS rules specifically for the default Android Browser using @media queries

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

Implementing conditional statements in Puppeteer web scraping

Conditional text-boxes can be added to table columns based on certain conditions

Guide on activating javascript code for form validation using php

Navigate through a nested JSON structure and update the data points

Inject a value sent from response.render directly into the script tag

Introduce a pause interval between successive ajax get calls

Error message "The function is not defined" is commonly encountered in node.js programming

Every time I attempt to execute mupx deploy, an error message appears

Utilizing jQuery, setInterval, and making asynchronous Ajax requests

Expand the display on mobile devices

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

Starting the download of the canvas featuring a stylish border design

Accessing the data from an HTML5 slider using JQuery

"Exploring the Best Locations to Incorporate Plugins in VueJS Webpack