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

The login page continues to show an error message for incorrect credentials unless the submit button is clicked

My current project involves a React component called "Signin.js". Within this component, there are login input fields as I am working on creating a login system using Node.js, Express.js, and MySQL. To achieve this, I have set up a post request that sends ...

javascriptnode.jsreactjsexpressaxios

How to retrieve the object's property with the highest numerical value using JavaScript

My current object is structured as follows: const obj = { happy: 0.6, neutral: 0.1, said: 0.3 } I'm trying to determine the best method to retrieve the property with the highest value (in this case, it would be "happy"). Any suggestions o ...

javascript

Integrating a PHP function within an ECHO statement

Here is a code snippet I'm currently using in my Wordpress: function wpstudio_doctype() { $content = '<!DOCTYPE html>' . "\n"; $content .= '<html ' . language_attributes() . '>'; echo apply_filte ...

phphtmlwordpress

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

CSS3 transition applied to a jQuery direction-aware hover effect

I'm encountering difficulties making direction-aware hover and css transitions function correctly. Specifically, I am attempting to create a grid of elements with front and back faces, and on hover, have a css transition that flips the element to disp ...

javascriptjquerycsscss-transitions

Using JavaScript to sort data within specific timeframes

How can I extract data based on timestamps greater than 06? "use strict" const data = [ {timestamp: "2020-04-23 05:05", totalAvg: 2.596211180124224}, {timestamp: "2020-04-23 05:10", totalAvg: 3.22052273203436}, {timestamp: "2020-04-23 05:15", t ...

javascriptlodash

Navigating through a DOM string in Nuxt.js

I'm in search of a solution to parse a string containing DOM elements within Nuxt.js. The challenge lies in finding a parser that functions seamlessly on both the client and server side. Thus far, I've come across options that are limited to eit ...

javascriptjquerynode.jsdomnuxt.js

developing a fresh node within the jstree framework

Recently, I have been working on creating a node using crrm as shown below $("#TreeDiv").jstree("create", $("#somenode"), "inside", { "data":"new_node" }); This specific function is triggered by a wizard, enabling me to seamlessly create a new node withi ...

javascriptjqueryhtmlcssjstree

React is unable to identify the `activeKey` property on a DOM element

First and foremost, I am aware that there have been a few inquiries regarding this particular error, although stemming from differing sources. Below is the snippet of my code: <BrowserRouter> <React.Fragment> <Navbar className=& ...

javascriptreactjsreact-bootstrap

Duplicate the image from a specific div to another div, ensuring that only one clone is created

I'm trying to replicate an image in multiple spots within a frame, but I can only manage to get one instead of many. Can someone please tell me what I'm doing wrong? I am creating a map of terrain where I need to clone images from one div to anot ...

javascriptjqueryhtml

You must use the 'new' keyword in order to invoke the class constructor

Although similar questions have been asked before, my situation differs from the typical scenarios. I have a basic base class named CObject structured as follows: export class CObject extends BaseObject { constructor() { super(); } sta ...

javascriptnode.jstypescript

The function does not provide an output of an Object

I have two JavaScript classes, Controller.js and Events.js. I am calling a XML Parser from Events.js in Controller.js. The Parser is functioning but not returning anything: SceneEvent.prototype.handleKeyDown = function (keyCode) { switch (keyCode) { ...

javascriptjquerysamsung-smart-tv

Jasmine is having trouble scrolling the window using executeScript

I usually use the following command: browser.driver.executeScript('window.scrollTo(0,1600);'); However, this command is no longer working. No errors are showing in the console, making it difficult to troubleshoot. Interestingly, the same scri ...

javascriptgoogle-chromeselenium-webdriverjasmineprotractor

Trouble with shadow rendering in imported obj through Three.js

After importing an object from blender and setting every mesh to cast and receive shadows, I noticed that the rendered shadows are incorrect. Even after merging the meshes thinking it would solve the issue, the problem persisted. It seems like using side: ...

javascriptthree.jsshadow.obj

Require assistance in accessing the second tab on a webpage using JavaScript tabs

Currently, I have a web page with two tabs that are initially hidden until the corresponding tab button is clicked. The click event is managed by jQuery. For example, let's assume that tab 1 is the default one when the page loads. Now, I am looking fo ...

javascriptjquery

What is the best way to set the value of the days in a month to a div

I've been experimenting with creating a calendar using javascript, HTML, and CSS on my own. I managed to achieve some functionality like obtaining the current month and year as well as the previous month and year by clicking a button in HTML. However, ...

javascripthtmlcssvariables

How can the height of div1 be made equal to the container and div2 without using JavaScript?

Here is the structure of the HTML: <div id="container"> <div id="blue-box"> </div> <div id="red-box"> </div> </div> The CSS styling for these elements is as follows: #container { background-color:blue; ...

htmlcss

Trigger a JQuery selector when a click event occurs

I'm trying to set up an event trigger when clicking on a specific class within a div. Here's what I've attempted: $("div .event").click(function() { alert($( this ).text()); }); And also tried the following: $("div").on("click", $(&a ...

javascriptjquery

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

Tips on overriding the outline:none property in CSS

Is there a way to overwrite the 'outline: none' property in CSS? I have a parent class that has this property set, but I want to remove it in the child class. ...

htmlcss