Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. It's similar to what Yahoo does on their Tumblr site if you look at the top right-hand side.

Any suggestions on how to accomplish this?

Here is the link to my code snippet: http://jsfiddle.net/cancerian73/5525K/

#scroller 
{
    position: relative;
    top: 100px;
    width: 100%;
    background: #CCC;
    height: 100px;
}
javascriptjqueryhtmlcssskrollr

Answer №1

Presented are the JavaScript and CSS snippets for a scrollable sidebar feature:

$(function() {

  var scroller = $('#scroller'),
      sidebar  = $('#sidebar'),
      iconBar  = $('header ul'),
      distance = $('header').outerHeight() - scroller.outerHeight(),
      pos      = $('#positioner');

  $(window).scroll(function() {

    if($(this).scrollTop() >= 0) {
       $('body').stop().animate({ top: - pos.offset().top / 3 + 'px' }, 200, 'linear');
    }
    if($(this).scrollTop() > distance && scroller.hasClass('default')) {
        scroller.removeClass('default').addClass('fixed');
        sidebar.css({ position: 'fixed', marginLeft: '0', top: '80px' });
        iconBar.animate({ top: '90px' }, 300);
    } 
    else if($(this).scrollTop() < distance && scroller.hasClass('fixed')) {
        scroller.removeClass('fixed').addClass('default');
        sidebar.css({ position: 'relative', top: '0'});
        iconBar.animate({ top: '5px' }, 300);
    }

  });

});
body {
    background: #eee;
    position: relative;
    height: 3000px;
    margin: 0;
    padding: 0;
    top: 0;
}
ul {
    list-style: none;
}
header {
    background: #3f008f;
    height: 250px;
}
header ul  {
    position: fixed;
    top: 5px;
    right: 5px;
}
... (CSS snippet continues)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="positioner"></span>

<header>
  <ul>
    <li>Icon 1</li>
    <li>Icon 2</li>
  </ul>
</header>

<div id="scroller" class="default"></div>

<div id="wrapper">
    
... (HTML markup continues)
    
    </div>

Answer №2

UPDATE: Consider optimizing the design of the icons using fixed positioning. Here is a sample implementation to achieve this:

let menu = $('.navbar');
let origOffsetY = menu.offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > origOffsetY) {
        $('#wrapper').addClass('sticky');
    } else {
        $('#wrapper').removeClass('sticky');
    }    
});

I have also made modifications to the styles of the components below:

.top-icon-box {
    margin:3px 0 0 0;
    width:157px;
    height:25px;
    background-color:#ccc;
    position:fixed;
    top:5px;
    right:20px;
    transition: all 0.2s linear;
}
....
.sticky .navbar {
    position:fixed;
    top:0;
}
.sticky .top-icon-box {
    top:100px;
}

The code is now streamlined with a focus on switching the class for the wrapper element. Check out this link for a visual representation: http://jsfiddle.net/47tMu/

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

Using AJAX to delete items from the personalized shopping cart on your WooCommerce website

I am encountering an issue with removing products from the cart. Although my code successfully removes the product in ajax, it fails to refresh the cart. Here is the code snippet I am working with: add_filter('woocommerce_add_to_cart_fragments', ...

phpjqueryajaxwordpresswoocommerce

Arrow icon indicating active status in side navigation bar

As part of my journey to enhance my Html and Css skills, I have been recreating templates from various websites. While this exercise has taught me a lot, I have hit a roadblock with one particular template. I am struggling to understand how they manage to ...

htmlcssnavigationeffects

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

Customize your click event with conditional styling in React

When the onClick event is triggered, I am attempting to modify a class by calling my function. It appears that the function is successfully executed, however, the class does not update in the render output. Below is the code snippet: import React from &ap ...

javascriptcssreactjs

Incorporate JQuery into a basic PHP calendar

I'm trying to implement a feature where the calendar loads without having to refresh the page. However, all I see is a blank page. Any ideas on what might be causing this issue? External file: Calendar.php <?php $year = (isset($_POST['year& ...

phpjquerycalendar

Can a string be transformed into HTTP POST parameters?

Below is a snippet of code where I've utilized the .serialize() method to convert all form inputs into a string, which is then sent to the server: $.ajax({ type: "post", url: wp_urls.ajax_url, data: { action: "submit_form", ...

javascriptphpjqueryajaxpost

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

Error: Jest encounters an unexpected token 'export' when using Material UI

While working on my React project and trying to import { Button } from @material-ui/core using Jest, I encountered a strange issue. The error message suggested adding @material-ui to the transformIgnorePatterns, but that didn't resolve the problem. T ...

javascriptreactjsjestjsmaterial-ui

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

I am looking to sort a JSON array in JavaScript based on a search text. The sorting should prioritize items that match the search text at the beginning of their value, followed by alphabetical sorting for the remaining results. Even if the search text is f ...

javascriptarraysjsonsorting

The initial update of ng-model is not occurring

I am currently working on a checkbox functionality in my project that is bound to an ng-model: <input type="checkbox" ng-change="toggleAll(globalChecked)" ng-model="globalChecked"> The toggleAll function is responsible for accessing the globalCheck ...

javascriptangularjs

Using Bootstrap to align items to the right in a navigation bar

I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...

htmlcsstwitter-bootstrapbootstrap-5

When an input element is being controlled from outside the modal using a portal, it is losing focus after a key press

[Resolved] The input component is experiencing a focus issue when any key is pressed, only when its value is controlled from outside of the portal. NOTE: I apologize for any confusion. While writing this post, I identified the problem in my code, but dec ...

javascriptreactjs

What is the best way to combine a top <div> with a bottom <div> in an image without creating unsightly white gaps?

I need help overlapping two divs on top of an image in HTML. The first div should cover part of the top area of the image, while the second div should cover part of the bottom area of the image. These divs should be displayed over the image without leaving ...

htmlcssweb-frontend

Is It Possible to Determine If a Checkbox Has Been Checked?

Here's what I have now: I have a checkbox that I need to verify if it's selected. <input type="checkbox" name="person_info_check" value="0" &nbps>Read and agree!</input> However, the method I found online to verify the checkbox ...

javascriptjquerycheckboxforms

What is the process for implementing the Google Analytics tag on a Streamlit-built website?

I want to monitor my Streamlit UI in Google Analytics. To achieve this, Google Analytics requires the following code snippet to be inserted into the <head> section of the HTML file. <script async src="https://www.googletagmanager.com/gtag/js? ...

pythonhtmlgoogle-analyticsfastapistreamlit

I want to use React Bootstrap and Next.js to retrieve the text from a textbox in a React Component and then send it back to my Index.js file. How can I accomplish this task?

I need some assistance. Currently, I am facing a challenge. I am trying to retrieve data from one of my React Components named ParameterList. This component contains a React-Bootstrap Form.Control element for numerical input. My goal is to take the value ...

javascriptreactjsbootstrap-4next.jsreact-bootstrap

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

I am currently utilizing the JavaScript code provided below to generate a pdf file containing multiple charts. However, all the charts are being placed on a single page. My inquiry is regarding how I can customize the code to have each chart on its own sep ...

javascriptpdfcanvas

Hover effect transition malfunctioning

I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me wit ...

htmlcss

Avoiding line breaks when submitting data through Ajax calls is achievable by using the `.val` method

I've come across multiple articles discussing ways to add line breaks to the .val in jQuery, but unfortunately none of them have worked for me. I attempted using the recommended workaround provided by jQuery: $.valHooks.textarea = { get: function( ...

javascriptjqueryajax

The node experiences a crash when the redis-server goes offline

Struggling with a persistent issue here. Despite reading numerous documents and posts from others on the same topic, I can't seem to find a solution to prevent this problem. I am intentionally shutting down the redis server to avoid potential disaster ...

javascriptnode.jssocket.iosocket.io-redisredis-server