Animate a div to sense whether it has reached the top or bottom position

Is it possible for a div to animate when it reaches almost halfway while scrolling? I'm looking to achieve this effect on a sticky sidebar, similar to how it works on this website: sample

This is the code I have:


$(function(){ // document ready
   if ($('.filter-container').length) { // make sure ".filter-container" element exists
      var el = $('.filter-container');
      var stickyTop = $('.filter-container').offset().top;
      var stickyHeight = $('.filter-container').height();

      $(window).scroll(function(){
          var limit = $('#footer').offset().top - stickyHeight - 100;
          
          var windowTop = $(window).scrollTop();
          
          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0, width: 280 });

          }
          else {
             el.css({ position: 'static', width: 280 });

          }

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

          }
        });
   }
});

Answer №1

If you're looking to create a sticky navigation bar, one approach is to utilize Waypoints in a jQuery function.

Alternatively, you could achieve the same result more easily using Bootstrap affix. By adding Bootstrap properties to your div element like so:

<div class="filter-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

This implementation will apply the class .affix-top to the div until the user scrolls past 60px. Then, it will switch to .affix when the user reaches 200px from the bottom of the page.

You can see a demonstration of this functionality in action on this jsfiddle:

http://jsfiddle.net/skelly/df8tb/

The provided example includes the necessary css styles to create the sticky effect for your navigation bar.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Occupying the entire width of a screen

Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...

The handleChange function fails to trigger when selecting a date using Material UI components

I am currently facing an issue with the material ui datepicker. When I click on a date, the selected date is not chosen and the date window does not close. I suspect this is due to passing the date into another file and the handleChange function (from Form ...

Implementing a Response to an AJAX POST Request with Servlets

I have a unique situation where I need to validate a username input in a text box. The process involves sending the entered username to a server for checking if it has already been taken by another user. If the username is available, I want to change the b ...

jQuery eliminates initial div just a single time

Here is a function I have created: function removeDiv() { var topmost = jQuery('.xx'); var totContent = topmost.find('.zz').length; var $target = jQuery('.xx').find('.zz').eq(0); if(totCont ...

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

Blazor components experience element interaction while utilizing more than one instance of Blazorise.Bootstrap component

I am facing an issue in my Blazor app where a component with a button and bootstrap collapse works fine when used once on a page, but triggers collapse elements in other instances when used multiple times. This seems to be happening because their IDs are s ...

Tips for shutting down an open section within a jQuery Accordion?

I am having trouble closing the active panel using jQuery. The rest of my code is functioning perfectly, but for some reason, I can't get the active panel to close. Currently, the code is working correctly in that only one panel can be open at a time ...

Adjust the max-height to occupy the entire available space

One of the challenges I'm facing with my web application is designing the layout in a way that all elements interact seamlessly. The structure is as follows: <body> <nav> <-- top navigation bar <ol> <-- breadc ...

Can you tell me the CSS selector needed to extract this specific section from the HTML code?

<span class="_c24 _2ieq"> <div><span class="accessible_elem">Birthday</span> </div> <div>April 28, 1998</div> </span> I need to extract the date from a website that has the structure above. How can I us ...

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Despite finding numerous articles and solutions, my code still refuses to work. What could I be overlooking? Below is a snippet of the code where the crucial part is marked at the comment '! HERE') <!-- Table with grades --> <table clas ...

When the onClick method is triggered, it retrieves a single object from json_encode

Currently, I am using the json_encode method on data extracted from a table. After applying a var_dump to this variable, it reveals three objects: {"id": "5"} {"id": "6"} {"id": "7"} Here's my process: I have an image with an onclick function: < ...

New to AppleScript: Encountered an unexpected identifier instead of the expected end of line

tell application "Microsoft Word" activate insert text "property eGrepx : "priceValue___11gHJ\">\\$\\d{2},\\d{3}.\\d{2}" " at end of text object of active document e ...

Retrieve all chosen option elements from every select element within a form

Hello everyone and thank you for offering your assistance in answering my query. I am currently working on a form that includes 6 select elements all having the "skillLevel" class. I am looking to extract the values of each select element, preferably in a ...

Display MQTT information on a Django template

I've been utilizing paho-MQTT successfully to receive messages. However, I'm facing a challenge in displaying the received data in a template. Below is an excerpt of my code: import paho.mqtt.client as mqtt import json def on_connect(client, use ...

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

How can I use a button created with jQuery's .html() method to conceal a <div>?

I am facing an issue with implementing a simple banner that should appear in an empty element only when specific values are returned by an Ajax call. In the banner, I want to include a Bootstrap button that hides the entire div when clicked. Due to my la ...

modify the values of directive elements using a templateUrl

HTML Template: I have an element in the template file seats.tpl.html like this: <select id="guest_table"> <option tables="emptySeats" ng-repeat="table in emptySeats" value="{{table.tableId}}">{{table.tableNumber}}</option& ...

Display user information from another component using Vue's dynamic routing feature

In my UserList.vue component, I have a list of users that I want to display on individual user profiles in the SingleUser.vue component. What is the easiest way to achieve this? The user details are stored in the UserList.vue component. When a specific us ...

Guide to creating a synchronous wrapper for jQuery ajax methods

I've made the decision to switch from synchronous ajax calls to asynchronous ones due to lack of support in most modern browsers. My code is currently reliant on synchronous (and dynamic) ajax calls to client-side functions that must be completed befo ...

Is there a way to retrieve the transaction specifics for the initial 50 clients from a MongoDB database?

In my PC's local server, there is a cluster with approximately 240,000 entries of transaction data. The abbreviation Cust_ID represents Customer ID. https://i.sstatic.net/5g65l.png Each file contains transactions made by different customers, with a ...