Is there a way to determine if a div is positioned 100px from the bottom edge?

Question

Is there a way to determine if a div is positioned 100px from the bottom edge?

When using the sticky class to stick a div, I encountered an issue where it sticks correctly from the top but overlaps the footer at the bottom.

https://i.sstatic.net/28A3A.jpg

Here is the HTML code:

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active " id="menu1">
    <div class="col-sm-12"><div class="clear">&nbsp;</div></div>

    <!-- LEFT NAV START -->
    <div class="col-sm-3" id="sticky-anchor2">
    <div class="sticky2">
    <span style="color:red"><strong>Menu Group</strong></span>
    <ul aria-labelledby="dropdownMenu1">
    <?php foreach ($categories as $key => $value) { ?>
        <li role="presentation">
        <a role="menuitem" tabindex="-1" href="<?php echo $nav_url; ?>#cat_<?php echo str_replace(' ', '_', trim($key)); ?>" class="anchorLink" style="color:#FFF !important;">
        <button class="btn btn-danger btn-sm btn-block setlbl" type="button"><?php echo $key; ?></button></a>
        </li>

        <?php } ?>
        </ul>
</div>

This is the jQuery code I am using:

var window_top = $(window).scrollTop();
var div_top2 = $('#sticky-anchor2').offset().top - 100;
if (window_top > div_top2) {
    $('.sticky2').addClass('sticky stick');
} else {
    $('.sticky2').removeClass('sticky stick');
}

I would like the div to remove the stick class when it is about 150px from the bottom. How can I achieve this?

javascript jquery css

Answer 1

Answer №1

Check out this solution:

Give it a try by visiting my fiddle: https://jsfiddle.net/v3kq1ddd/ or expand the snippet to full screen and adjust the window size to witness the border color transition from red to blue.

$(document).ready(function() {
    $(window).resize(function() {
        var eHeight = $(".sticky2").height();
        var eTop = $(".sticky2").offset().top;
        var tot = eHeight + eTop;
        var heightDifference = $(window).height() - tot;

        $('.height').text(heightDifference);

        if(heightDifference < 150) {
            $('.sticky2').addClass('blue');
        } else {
            $('.sticky2').removeClass('blue');
        }
    });
});

.sticky2 {
    height: 200px;
    width: 200px;
    border: 1px solid red;
}

.blue {
    height: 200px;
    width: 200px;
    border: 1px solid blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<lable>Space to bottom</lable>
<div class="height"></div>
<div class="sticky2">This is a div</div>

Answer 2

Check out this solution:

Give it a try by visiting my fiddle: https://jsfiddle.net/v3kq1ddd/ or expand the snippet to full screen and adjust the window size to witness the border color transition from red to blue.

$(document).ready(function() {
    $(window).resize(function() {
        var eHeight = $(".sticky2").height();
        var eTop = $(".sticky2").offset().top;
        var tot = eHeight + eTop;
        var heightDifference = $(window).height() - tot;

        $('.height').text(heightDifference);

        if(heightDifference < 150) {
            $('.sticky2').addClass('blue');
        } else {
            $('.sticky2').removeClass('blue');
        }
    });
});

.sticky2 {
    height: 200px;
    width: 200px;
    border: 1px solid red;
}

.blue {
    height: 200px;
    width: 200px;
    border: 1px solid blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<lable>Space to bottom</lable>
<div class="height"></div>
<div class="sticky2">This is a div</div>

Answer 3

Answer №2

When calculating the height of a document and window, it's important to consider any specific div that may need to be included.

For accurate scroll calculations, the 'Scroll' event should be utilized to track scroll amounts continuously. Additionally, when dealing with a 'sticky stick', remember to use a hyphen between the classes, not two separate classes.

$(window).scroll(function(){ 
           var scrollamount=$(window).scrollTop();
            var totalheight=($(document).height() - ($(window).height()));

             if(scrollamount > totalheight-100)
                {
                  $('.sticky2').addClass('sticky_stick');
                 }
             else
              $('.sticky2').removeClass('sticky_stick');



 });

JsFiddle: https://jsfiddle.net/2jo69opo/

Answer 4

When calculating the height of a document and window, it's important to consider any specific div that may need to be included.

For accurate scroll calculations, the 'Scroll' event should be utilized to track scroll amounts continuously. Additionally, when dealing with a 'sticky stick', remember to use a hyphen between the classes, not two separate classes.

$(window).scroll(function(){ 
           var scrollamount=$(window).scrollTop();
            var totalheight=($(document).height() - ($(window).height()));

             if(scrollamount > totalheight-100)
                {
                  $('.sticky2').addClass('sticky_stick');
                 }
             else
              $('.sticky2').removeClass('sticky_stick');



 });

JsFiddle: https://jsfiddle.net/2jo69opo/

Is there a way to determine if a div is positioned 100px from the bottom edge?

Answer №1

Answer №2

Similar questions

Various settings in JQuery UI Slider

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

A guide on instantly updating displayed flat/section list elements in React Native

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

Vue - Utilizing mapState in Vuex to display the contents of the first object within an array

Is there a solution for the noticeable delay in loading fonts on a web page?

Only output to the console if the data returned from an AJAX request has been

Trouble with the Width of Selection Box Options

Tips for choosing a week on a calendar with JavaScript

Expect a reply within the loop

What is the best method to loop through this object with JavaScript?

Having issues with the onclick() function not functioning properly with Jquery?

Showcase text in a straight row by utilizing ng-repeat and bootstrap

jquery function context

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

Having trouble transmitting information from the view to the controller in Asp.net MVC with Jquery

What is the best way to fetch HTML content using JavaScript?

Uploading an image via Chrome and transferring it to a server using PHP: a step-by-step guide

The div will not receive the JSON response

Utilizing CSS to transform text with a sleek, animated writing effect