Creating a sidebar that remains fixed in place even as the page is scrolled down can be achieved by using CSS and positioning properties

I am looking to create a website with a specific layout design as shown in this image: https://i.stack.imgur.com/ndKcz.png

The main focus is on making the sidebar (F/T container) function as a social network link, sticking to the right side of the page even when the viewer scrolls down. I want to achieve this using pure CSS and HTML without relying on Javascript. Specifically, I need guidance on which div to place the sidebar in and potentially utilizing the position:static property in my CSS code.

If incorporating Javascript becomes necessary, I would appreciate it if someone could provide me with a ready-made solution as I am not very familiar with working in that programming language. Here is the current state of my HTML code (I believe I can manage the CSS aspect):

<html>
<head>
    <style></style>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
    <body>
        <header>
            <div id="nav">

            </div>
        </header>        
        <div id="intro">
        </div>
        <div id="content">//important content here (visible only when scrolled down)        
        </div>

        <div id="footer"></div>    
    </body>
</html>

I am aware of a similar issue involving one div, but in my case, there are two. Any assistance provided would be greatly appreciated. Thank you!

javascripthtmlcss

Answer №1

Check out this CodePen link here!

HTML

.container {
      position: relative;
    }
    .page-contents {
      line-height: 30px;
    }
    .social-actions {
      background: #777;
      color: #000;
      width: 150px;
      height:70px;
      position: fixed;
      top: 100px;
      left: 0;
      z-index: 10;
    }
<div class="container">
      <div class="page-contents">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a nisi enim. Cras eu aliquet ante. Duis et urna efficitur,
          condimentum urna auctor, interdum arcu. Sed in enim eu enim congue vehicula. Aenean eget ligula eu mi vehicula suscipit
          vel vitae mi. Integer a nisl feugiat, faucibus lectus sed, elementum orci. Nullam quam magna, euismod at lorem a, gravida
          imperdiet dui. Vestibulum id tellus lorem.</p>

        <p>Vestibulum orci tortor, malesuada sit amet hendrerit vel, maximus vitae elit. Quisque sed dapibus arcu. Quisque eget
          venenatis libero, sit amet interdum turpis. Mauris risus odio, scelerisque eu molestie in, venenatis vel ante. Proin
          et diam leo. Curabitur gravida, turpis a consectetur porta, ipsum nibh lobortis arcu, non maximus justo nibh vel sem.
          Cras faucibus, quam quis tempor interdum, elit lacus dapibus nisi, eleifend pretium lacus lorem sit amet libero. Ut
          interdum neque nisi, a scelerisque purus porttitor eget. Nulla pretium aliquam commodo. Interdum et malesuada fames
          ac ante ipsum primis in faucibus. Nulla mattis id arcu ut porta.</p>

        <p>Maecenas vitae mi consequat, scelerisque massa interdum, posuere tortor. Nam blandit ultricies nisl, viverra tincidunt
          lectus semper ac. Phasellus porta augue tortor, vel venenatis sapien aliquet congue. Sed luctus consequat arcu at venenatis.
          Morbi accumsan ligula ultricies elit vulputate, et molestie sem interdum. Etiam congue aliquam augue, eu efficitur
          felis. Vestibulum pellentesque tellus tellus, at venenatis ligula finibus id. Quisque id accumsan nibh.</p>

        <p>In at purus erat. Etiam vitae purus vel orci ultrices congue. Aliquam porta at lectus ultrices volutpat. Vivamus scelerisque
          vel risus a aliquam. Duis est augue, iaculis quis interdum eget, tempor accumsan quam. Vivamus vel lobortis augue,
          eu convallis lectus. Nam venenatis scelerisque maximus. Vivamus lobortis semper pharetra. Cras nisi dui, placerat congue
          nulla sed, suscipit dictum dui. Integer tristique quis ligula at dignissim. Vivamus pulvinar finibus tortor, vulputate
          placerat ante luctus ut. Nulla id euismod libero. Fusce in nunc tellus. Aliquam mattis sagittis tortor, id varius ex
          sodales eu. In mollis ultrices arcu vel consequat.</p>

        <p>Cras faucibus sem vitae erat fermentum tincidunt. Aenean id eleifend tellus. Fusce id scelerisque erat. Fusce pulvinar
          egestas sapien, et fermentum massa accumsan ultricies. Nullam laoreet, metus id hendrerit scelerisque, enim dui cursus
          nisi, in accumsan nibh erat vel dui. Sed aliquam hendrerit libero, vel laoreet urna tincidunt eget. Donec scelerisque
          quam ut fringilla blandit. Aenean lobortis commodo dui a eleifend. Etiam sed scelerisque purus.</p>
      </div>
      <div class="social-actions">
        <a href="fb.com">Connect on Facebook</a>
      </div>
    </div>

Answer №2

Try using position:fixed; to resolve your issue

Here's a fiddle link for reference: http://jsfiddle.net/zv5fh0yk/

#container
{
    max-width: 1000px;
    width:100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding:0;
}
#header
{
    float: left;
    z-index: 20;
    width: 100px;
    padding-top: 20px;

}
#header .inner {
    position: fixed;
    width:10%;

}

.inner li{list-style:none;}
#maincontent {
    width: 80%;
    float:right;
    padding-left:5%;
}
<div id="container">

    <header id="header">
        <div class="inner">
        <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
        <li>Login</li>
        </ul>
        </div>
    </header>

    <div id="maincontent">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>


</div>

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

Validate that the input is an array

Looking for a way to determine if a function parameter is an array or not, and then process it accordingly. If the parameter is not an array, convert it into an array before performing the desired function. For example: interface employee { first: st ...

javascriptarraystypescript

The bottom section of the webpage fails to follow the CSS height or min-height properties

Taking into account the question I raised earlier: How can a div be made to occupy the remaining vertical space using CSS? I received an answer which I have been experimenting with lately: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt ...

csshtml

use angularjs directive to position a div absolutely aligned with the right edge of another div

I am attempting to use an angularjs directive to align the right side of an absolute div with another div. The code is working, but I am encountering an issue where the children divs are slightly wider than their parent, causing the offsetWidth value to be ...

htmlcssangularjs

Searching for various object values within an array and then adding two properties together in JavaScript

I am working with an array of objects that require me to analyze two properties in order to calculate a value. let data = [ { NodeId: "9837f279", NodeName: "Node1", summary: { current: 50, limit: 75 ...

javascriptarraysjsonecmascript-6

The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged. resolve:{serverResolver:ServerResolverDynamicDataService}}, console.log("ServerResolverDynamicDataService constructor"); console ...

javascriptangulartypescriptangular-ui-routerangular-resolver

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

I'm a newcomer to Next.js and TypeScript and I can't seem to find any helpful resources on resolving this particular issue: import Image from 'next/image'; export default function Item({ image }) { // <-- parameter image needs a &ap ...

javascriptreactjstypescriptnext.jsfrontend

Keep the text centered, even if it's larger than the container

I'm currently struggling to center some text. Here is how my text is currently formatted: <div class="panel panel-default" ng-repeat="criteria in controller.productCriteria"> <div class="panel-heading"> <div class="row flex ...

htmlcsstwitter-bootstrap-3

Breaking down object properties to 'this' using destructuring in javascript

I would like to set the pagination result from response.data to Vue data. The standard approach would be: this.resultData = response.data.results this.totalResults = response.data.total this.perPageResults = response.data.per_page However, ...

javascriptvue.jsobject-destructuring

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

Experiencing memory issues while attempting to slice an extensive buffer in Node.js

Seeking a solution for efficiently processing a very large base64 encoded string by reading it into a byte (Uint8) array, splitting the array into chunks of a specified size, and then encoding those chunks separately. The current function in use works but ...

javascriptnode.jsperformance

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

cssmaterial-ui

What is the best way to extract the ID of an element that triggers an OnChange event?

Just a heads up: The solution to my problem ended up being CSS code that was triggered by clicking on a widget. Once I realized it was CSS, along with the widget name and hover action, I was able to handle it successfully. Previous question before the PS ...

javascriptdomselenium-webdriverfirebuggoogle-chrome-devtools

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

javascriptangulartypescriptweb-component

Executing a controller method in AngularJS when redirecting a page

I am currently working on an app using Cordova/Phonegap, Ionic, and AngularJS. One challenge I am facing is trying to call a method from a controller inside my app when redirecting to another HTML page (secondPage.html). This particular method (secondMetho ...

javascriptangularjscontrolleronloadionic-framework

Revise the list on the page containing MEANJS components

Utilizing MEAN JS, I am attempting to make edits to the list items on the page, but an error keeps appearing. I have initialized the data using ng-init="find()" for the list and ng-init="findOne()" for individual data. Error: [$resource:badcfg] Error in r ...

javascriptangularjsmeanjs

Is there an HTML editing tool that has the ability to collapse code blocks by tags and rearrange them?

I'm in search of a text editor or IDE that includes syntax highlighting and allows me to collapse HTML code blocks by tag. I currently use Eclipse, but its "folding" feature only works on top level tags like TABLE, not child tags like TD and TR. Are t ...

phphtmleditorfolding

struggling to locate the file index (I've attempted numerous solutions from various forums with no success...)

Apologies for asking a question that may have been asked numerous times before, but I'm encountering some issues and need your help... Thank you in advance! Here is the HTML form I am working with: <form action="action/actionindex.php" method="po ...

phphtmlundefined-index

Utilizing Firebase authentication and next-auth in Next.js - Authentication currently returns null

I'm creating a website with nextjs 13 (app router) and incorporating firebase. I've come across suggestions to combine next-auth and firebase auth for using firebase auth effectively. Accordingly, I have configured my firebase Here is the fireba ...

javascriptnext.jsfirebase-authenticationnext-auth

Invoke a Node.js script from a Spring Boot application to pass a Java object to the script. The script will modify the object and then return it back to the originating class

class Services { Address address = new Address(....); /* Invoke NodeJs script and pass address object In the js script modify address object var address = getAddress() Modify address object Return address obj ...

javascriptjavanode.jsspring-boot

The v-text-field within the activator slot of the v-menu mysteriously vanishes upon navigating to a new route within a

Working on my Nuxt project with Vuetify, I encountered an issue where the v-text-field would disappear before the page changed after a user inputs date and clicks save. This seems to be related to route changing, but I have yet to find a suitable solutio ...

javascriptreactjsvue.jsvuetify.jsnuxtjs