Navigating downwards while maintaining a stationary element

I need to keep my social buttons fixed in position on my website, even when the user scrolls down. I want them to be vertically centered on the right side like shown here:

https://i.sstatic.net/0xfSC.png

This is how my code is currently set up:

// Animate the element's value from x to y:
$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body { margin-top:20px; }
.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
      <div class="row">
          <div class="col-md-3">
              <div class="list-group">
                  <a href="#" class="list-group-item visitor">
                      <h3 class="pull-right">
                          <i class="fa fa-eye"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Website Views</p>
                  </a><a href="#" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-facebook-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Facebook Likes</p>
                  </a><a href="#" class="list-group-item twitter">
                      <h3 class="pull-right">
                          <i class="fa fa-twitter-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Twitter Followers</p>
                 </a><a href="#" class="list-group-item youtube">
                      <h3 class="pull-right">
                          <i class="fa fa-youtube-play"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Youtube Subscribers</p>
                  </a>
              </div>
          </div>
      </div>
  </div>

My issue was trying to position this

position: fixed; right: 0; top: 100px;

above the <div class="container">. The icons moved but the view rectangles stayed put.

When I placed the

position: fixed; right: 0; top: 100px;

below the <div class="list-group">, it looked cramped and squeezed.

https://i.sstatic.net/FG8fr.png

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Here is the latest version of the code as requested:

$({ someValue: 0 }).animate({ someValue: Math.floor(Math.random() * 3000) }, {
    duration: 3000,
    easing: 'swing', // can be anything
    step: function () { // called on every step
        // Update the element's text with rounded-up value:
        $('.count').text(commaSeparateNumber(Math.round(this.someValue)));
    }
});

function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
    }
    return val;
}
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");
body { margin-top:20px; }
.fa { font-size: 50px;text-align: right;position: absolute;top: 7px;right: 27px;outline: none; }
a { transition: all .3s ease;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease; }
/* Visitor */
a.visitor i,.visitor h4.list-group-item-heading { color:#E48A07; }
a.visitor:hover { background-color:#E48A07; }
a.visitor:hover * { color:#FFF; }
/* Facebook */
a.facebook-like i,.facebook-like h4.list-group-item-heading { color:#3b5998; }
a.facebook-like:hover { background-color:#3b5998; }
a.facebook-like:hover * { color:#FFF; }
/* Twitter */
a.twitter i,.twitter h4.list-group-item-heading { color:#00acee; }
a.twitter:hover { background-color:#00acee; }
a.twitter:hover * { color:#FFF; }
/* Youtube */
a.youtube i,.youtube h4.list-group-item-heading { color:#c4302b; }
a.youtube:hover { background-color:#c4302b; }
a.youtube:hover * { color:#FFF; }
<div class="container" style="height:900px;">
</div>
<div class="container" style="position: fixed; right: 0; top: 100px;width:250px!important;">
      <div class="row">
          <div class="col-md-3">
              <div class="list-group">
                  <a href="#" class="list-group-item visitor">
                      <h3 class="pull-right">
                          <i class="fa fa-eye"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Website Views</p>
                  </a><a href="#" class="list-group-item facebook-like">
                      <h3 class="pull-right">
                          <i class="fa fa-facebook-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Facebook Likes</p>
                  </a><a href="#" class="list-group-item twitter">
                      <h3 class="pull-right">
                          <i class="fa fa-twitter-square"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Twitter Followers</p>
                 </a><a href="#" class="list-group-item youtube">
                      <h3 class="pull-right">
                          <i class="fa fa-youtube-play"></i>
                      </h3>
                      <h4 class="list-group-item-heading count">
                          1000</h4>
                      <p class="list-group-item-text">
                          Youtube Subscribers</p>
                  </a>
              </div>
          </div>
      </div>
  </div>

And now you can see the working demo example below:

Check Demo

If you want to prevent your icons from being squeezed, ensure that you manage the height and width of the icons responsively for a better appearance.

Here is the updated fiddle with Logo:

Check Updated Demo

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

Problem with setInterval when using the getMessage function

I have a dilemma where I am invoking a method to fetch messages from a database. This method is equipped with setInterval() for real-time chat functionality. The issue arises when I select another user; the messages from the previous user reappear without ...

javascriptjqueryajax

What are the steps to reset a tooltip with varying options based on the size of the screen?

Currently, I am utilizing the tooltipster.js library to create tooltips and attempting to adjust the default distance of the tooltip based on various screen sizes. Initially, the initialization appears as follows: $(inputTooltipTrigger).tooltipster({ ...

javascriptjquerycsstooltiptooltipster

Failure of AJAX Callback Triggering

Behold, behold! Witness the mighty ajax function: function ajax_call(call_method,data_to_send) { logger("Journey with me through the lands of ajax_call. Lo and behold, the data_to_send: "); logger(data_to_send); $('.clickable save_button& ...

javascriptjqueryajaxdjango

CSS fluid image gallery

I've been facing some challenges with creating a responsive image gallery. Despite using CSS and Bootstrap, I haven't had success with implementing it using the img tag or as a background. My goal is to achieve something similar to this: An ima ...

htmlcssimagebootstrap-4

Nunjucks is throwing a block end error

Currently working with nunjucks2 along with express and node, I encountered an error after upgrading njk to version 2.4.2: Template render error: (/home/aien/Web/Test/express/views/error.html) Template render error: (/home/aien/Web/Test/express/views/lay ...

javascriptnode.jsexpressnunjucks

When the email field is changed, the string is not being set to the state if it is

I encountered a strange issue while setting an email input as a string to state. Even though I can see on React Dev Tools that it gets sent, when I try to log it from another function, I get an empty string. The odd part is, if I change the order of the in ...

javascriptreactjs

Display the text field in Angular with the appearance of a password field, not an input field

I am currently working with Angular 8 for my Angular-Electron project. Within this application, I have a sensitive field labeled API-Key stored in tabular format that needs to be displayed on the user's account page. However, it must appear as a passw ...

javascripthtmlangulartypescriptelectron

Implement pop-up functionality on additional buttons. Modify existing code to accommodate multiple buttons

I have a feature that allows me to click on a button and trigger a pop-up window with the desired content. The issue I am facing is how to duplicate this functionality for multiple buttons, each triggering a different pop-up content. I attempted to duplic ...

javascripthtml

Ways to emphasize text using jquery without activating a click event

I aim to provide users with the ability to both click on an element as well as highlight the same element. If a user simply clicks, it should trigger a click event; however, if they perform a mousedown and select some text within the element, it should not ...

jquery

JQuery cannot target content that is dynamically inserted through an Ajax request

When I use an ajax call to pass dynamically generated html, such as in the example below: var loadContent = function(){ $.ajax({ url: '/url', method: 'GET' }).success(function (html) { $('.con ...

javascriptjqueryhtmlajax

What is the process for inserting a key value pair into a JSON object?

I am looking to enhance my JSON data by including a key-value pair in each object within the array. https://i.sstatic.net/48ptf.png My goal is to insert a key-value pair into every object in the students array. ...

javascriptjson

JQuery ajax submission of a form causes the select value to reset and fails to retain it

I am currently facing an issue with a select field that I am using to filter results in a table. Whenever I choose an option from the select field, it triggers the ajax and updates the table. However, the problem arises when the select field resets itself ...

jqueryruby-on-railsajax

Error encountered in Selenium WebDriver due to JavascriptException

Attempting to execute JavaScript within Selenium WebDriver has resulted in an error. The script was stored in a string variable and passed to the `executeScript()` method. Upon running the script, a `JavascriptException` occurred. Below is the code snippet ...

javascriptjavaseleniumarcgisesri

Validation for duplicate usernames or emails in the sign-up action of a REST API

As I develop a REST API, it is crucial for me to ensure the uniqueness of usernames and email addresses for every user. I have meticulously set up my database models to contain the necessary properties for this purpose. However, when it comes to route logi ...

javascriptexpressmongoose

How about this: "Implement a slider in the header of a php

I am looking to add a slider to the header of my phpBB website. I have inserted the code into template/overall_header.html but it doesn't seem to be working. As someone who is new to phpBB, any assistance would be greatly appreciated. ...

htmlcsssliderphpbb

Establish a fresh table using an already existing table

Is anyone up for a little challenge? I have an idea to extract data from an existing table and use it to create a new table. Look at the image above, the left table is what I already have. The goal is to generate the blue table on the right by utilizing t ...

phpjquerydatatable

Expanding the canvas leads to the freezing of the Ionic app on the emulator

I'm currently working on developing an ionic app that includes the feature of allowing users to sign their name on a canvas. I am utilizing signature-pad.js from https://github.com/szimek/signature_pad to create this signature functionality. Everythi ...

javascriptangularjsandroid-emulatorionic-frameworkhtml5-canvas

Are there any alternatives to tinyslideshow in jQuery?

Does anyone know of a script that is similar to tinyslideshow in jquery and works with all versions of Internet Explorer, including 6? If so, please share! ...

jqueryajax

Tips for adding a header field when submitting a form via POST

Is there a way to customize a field in the POST header when submitting a form? ...

javascripthtmlposthttp-posthttprequest

Show the output of a MySQL query on a modal, alert, or popup box within a webpage initiated by a search box, with the option to close the

Having worked in IT for 16 years, I am new to coding and seeking help on displaying search results from an input HTML box. I want the data from a MySQL database to be displayed in a modal, alert, or popup box with a closing "X" button. This database only c ...

javascriptphpmysqlbootstrap-modal