Tips for implementing a sticky sidebar in HTML5 with jQuery

I currently have two files: index.php and aside.php.

I've already created the contents of aside.php. Now, I want to make the aside page sticky.

To achieve this, I referred to the following link: http://codepen.io/pouretrebelle/pen/yvcBz

My struggle lies in determining the exact location for adding jQuery and CSS, and how to incorporate them into my existing code.

Can anyone provide assistance? Thank you in advance.

aside.php:


<?php
?>
<aside class="sidebar">
<div class="inside">
<section id="content">
        <!--Start Login Form --> 
        <form action="">
            <h1>Login Form</h1>
            <div>
                <input type="text" placeholder="Username" required="" id="username" />
            </div>
            <div>
                <input type="password" placeholder="Password" required="" id="password" />
            </div>
            <div>
                <input type="submit" value="Log in" />
            </div>
        </form>
                <!-- End form -->
</section>
        </div>
            <!-- Youtube palyer-1 -->
    <div class="inside">
    <section class="content">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="315" height=
...

CSS:

/* aside */
aside {
float: left;
margin-top:320px;
padding-top:5px;
height: 200px;
position: absolute;
}
.inside {
color:#fff;
position:relative;
margin-top:10px;
}

Answer №1

If you're looking to keep a section on your website sticky without using JavaScript, you can achieve this with just CSS. Simply apply the position:fixed property to the div you want to stick, such as an aside.

Check out this example for reference: jsfiddle.net/nrmgkdne

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

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

I've encountered an issue with a form that includes: <input type="password" id="password" /> I want to display some readable text temporarily, so I used the following code: $('#password').prop('type', 'text'); ...

Having difficulty configuring Compass in WebStorm

Trying to integrate Compass into an existing WebStorm project has been challenging for me as the CSS files are not linking properly. Despite my efforts to modify the relative links, I have not yet managed to resolve the issue. The folders and config.rb we ...

Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned? Check out my code here Here is the CSS I am using: #cover-inspiration{ width: 100%; height: 100vh ...

The Jquery bind function does not work as expected when trying to handle 'ajax:success', 'ajax:error', or 'ajax:complete' events after submitting a form

After implementing the jQuery bind method, I am facing an issue where the 'ajax:success', 'ajax:error' or 'ajax:complete' callbacks are not being triggered. The form is submitted via Ajax and the data gets inserted into the da ...

Creating your own browser extension similar to Firebug: A comprehensive guide

As a beginner dotnet developer, I am looking to create an Internet Explorer addon similar to Firebug in Firefox. Specifically, I need the HTML and CSS features of Firebug without all the extras. I'm not sure where to start or which platform to choose. ...

Failure to update labels within jQuery dialog triggered by async postback

My .aspx file contains the following elements: In my .aspx file: The update panel below includes a button that is used to open a dialog box. <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true" RenderMod ...

Ensuring the Datepicker is Validated

Having trouble with two date input fields: <input type='text' id='txtLeaveDate' name='txtLeaveDate' class='date' /> <input type='text' id='txtArriveDate' name='txtArriveDate' ...

Applying CSS rules from an array to elements by looping through

I'm looking for a way to allow users to input CSS styles and have those styles applied to the last selected element, which is determined by the "rangeselector" variable. Currently, the code selects the correct element, but only the first CSS rule is b ...

Changing a CSS block in IE7 using jQuery

Users have the ability to update the look of their customizable widget by editing CSS code in a textarea that automatically updates a <style> element when changed. Here is the JavaScript function: function updateWidgetStyling() { $("#stylePrevi ...

In JavaScript, use the href property to redirect to an external URL and then automatically scroll to a specific class on the page

I have a specific scenario where I need to create a link that redirects to an external website, of which I do not own. However, I am aware that there is a div with a particular class located at the bottom of their page, linking to an article. My goal is to ...

Inquiries about JavaScript and the YouTube API

Being very resourceful, I am currently exploring ways to feature my YouTube links on my website in an elegant manner. Tired of the redundancy of posting on both platforms, I am seeking a solution that seamlessly integrates these posts. Despite my efforts, ...

Error: The JQUERY autocomplete is throwing an uncaught type error because it cannot read the property 'length' of an undefined value

These scripts are being utilized at this source I have implemented jQuery Autocomplete to search for users in my database. Below is the controller code returning Json: public function searchusers1() { if ($_GET) { $query = $this -> input ...

restructure the HTML based on a jQuery condition

Using jQuery to Refresh HTML Content function(data) { if(data === "importtrue") { $('#rebuildme').//function like .html } else { $('#rebu ...

Creating dynamic web pages with jQuery is a simple and effective

I am currently using jQuery to create HTML elements with specific classes and then append them together. However, the code I have written is not adding the generated HTML to the container as expected. There are no errors being produced but the HTML is not ...

Changing React Phone Number input field's default style: A step-by-step guide

Is there a way to modify the appearance of the react-phone-number-input component using this npm package: https://www.npmjs.com/package/react-phone-number-input? I am working with React Hook Form and Tailwind CSS alongside this component. However, I' ...

Is there a way to implement seamless scrolling within an absolute element using Jquery?

Hey there! I recently implemented smooth scrolling on my website, but it seems to only work on single-page layouts. How can I make it function properly within an absolutely positioned scrollable element? Here are the link to my website and the correspond ...

Utilizing jQuery functions within Vue components in Quasar Framework

I've recently started delving into web app development and I'm encountering some basic questions regarding jQuery and Vue that I can't seem to find answers to. I have an application built using the Quasar Framework which frequently involves ...

Ensure that the submit button triggers the display of results with each click

My project involves two navigation bars, each with its own table displayed upon page load. Additionally, there is a search bar used to display search results in another table. The issue I'm encountering is that when I click the submit button once, th ...

Expanding a grid cell beyond 100% can be achieved using a 1

I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...

The sign-up button mysteriously vanishes after the page is refreshed

I am encountering an issue with the sign up button during the user registration process. There is a checkbox for Terms & Conditions, and the button should only become enabled after checking this box. Everything seems to be functioning correctly, but when I ...