What is the best way to design a personalized scrollbar for a stationary sidebar within a flexible Twitter Bootstrap design?

I recently implemented a fluid layout on my article page using Twitter Bootstrap. One of the features I added was a fixed top navigation bar that stays in place when it reaches the top of the browser window. I found a helpful tutorial on how to achieve this effect here:

Additionally, I used a similar technique to make the sidebar fixed once the navigation bar is fixed. The solution for this can be found in this thread:

Fixed sidebar navigation in fluid twitter bootstrap 2.0

While implementing these fixes, I noticed that the scrollbar in the sidebar doesn't quite match the custom scrollbars seen in websites like ReadWrite and The Next Web. I tried incorporating a custom scrollbar plugin like this one:

Unfortunately, I couldn't get it to work as intended. Another issue I encountered was that because the top nav bar has a height of 50px and is fixed, the sidebar's scrollbar extends off the bottom of the screen due to the "top:50px;" attribute.

If you'd like to see the demo I created, you can find it here:

http://jsfiddle.net/iagdotme/uvp8t/

Any suggestions on how to successfully implement a custom scrollbar effect similar to those on popular websites while resolving the scrollbar height issue would be greatly appreciated.

Thank you.

jquerycsstwitter-bootstrap

Answer №1

Have you experimented with Tiny Scrollbar from TNW or jScrollPane from ReadWrite? If not, consider testing them out by creating a project on jsFiddle to address any height issues that you may encounter.

If you decide to use jScrollPane, here is some CSS code to help you customize the scrollbar:

.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}

.jspVerticalBar, .jspTrack {
    background:none;
}


.jspDrag {
   background:#ccc;
   border-radius:10px;
}

Refer to this fiddle for a visual example: http://jsfiddle.net/technotarek/m7eKD/

Answer №2

Please check out my response on this thread (Parallax sidebar scrolling) that showcases the sidebar scrolling effect similar to what is seen on readwrite.com.

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

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

I have been working on a Contact Form that integrates Google Scripts. Everything seems to be functioning well as it successfully sends emails and formats them properly in my inbox. However, there are two issues that I am encountering: -I want to exclude t ...

javascriptjqueryhtml

CSS: Trouble with elements positioning

I am attempting to position two boxes on top of each other at the bottom of a different div. Here is the code I have: <div style = "height:400px;width:400px;border:1px solid #000;"> <div style = "position:relative;height:100px;width:100px;bor ...

htmlcss

The local() function in CSS @font-face is limited to finding only the "regular" and "bold" font styles, not others

Recently, I added some new fonts (specifically Roboto) to my Linux Ubuntu PC and wanted to incorporate them into my CSS using the @font-face rule. However, I encountered an issue when specifying different font weights within the src: ; property as shown in ...

htmlcssfontsfont-facelocal

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

jquerycssdrop-down-menunavbar

Using JavaScriptSerializer in MVC to deserialize JSON data

Here is the jQuery code snippet I am using: var items = new Array(); items.push({ "Item1":$("myvalue").val(), "Item2":$("myvalue2").val() }); .... data: { 'items': JSON.stringify(items) }, .... I ...

jqueryasp.net-mvcjsondeserialization

Increment and Decrement Values with JQuery

I am looking to implement a client-side Plus/Minus system where users can click on the plus sign to increase a value by 1 and minus sign to decrease the value by 1. The value should not go below zero and it should initially start at 0. Is there a simple wa ...

jquery

What is the best method to iterate through a jQuery array variable without any errors?

I am struggling with a PHP project where I need to create a json array of data values that will be used in a jQuery script. The array looks something like this: [3,94,83,141]. My goal is to leverage these values to manipulate the visibility of rows in a ta ...

javascriptjquery

Issues with slow scrolling and sticky sidebar on websites with infinite scrolling feature

My webpage has a sidebar that is supposed to scroll down with the page. However, I am experiencing some lagging issues where the sidebar appears a few seconds after scrolling. Additionally, the sidebar keeps moving downwards, making the page longer and cau ...

javascriptjquerysticky

Position two in-line divs at the bottom, one on each side

I am in search of a way to dynamically position two elements at the bottom of a container, making sure they are at opposite corners. Much like how the Stackoverflow Logo and the Ask Question are aligned at the bottom but on different ends of their containe ...

htmlcss

Can you tell me the specific location in the CSS where this logo image is defined?

I've been working on a website at http://onofri.org/WP_BootStrap/ and I'm facing an issue. When using FireBug, I can't seem to locate where in the CSS the image logo.png is defined (this is the small image in the upper-left corner of the the ...

htmlcssxhtml

Unable to send HTML content back from the controller when making Ajax requests in a messaging application

Currently, I am in the process of developing an integrated chat application within CRM. The main functionality involves displaying the chat history between users when a logged-in user clicks on a contact using Ajax calls. However, I have encountered some i ...

javascriptphpjqueryajaxcodeigniter

How to harness the power of loops in JavaScript

Having trouble getting this code to repeat a CSS transition properly. for (var i=0 ; i<4 ; i++){ setTimeout(function() { $('#top-left').css('margin', '45px 0 0 45px'); $('#top-mid' ...

javascriptjquerycsscss-transitions

Styling for Print Media: Adjusting the horizontal spacing between inline elements

I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other un ...

cssangularjsprintingmedia

Implementing an automatic link generation feature for files within a directory using JavaScript

I could really use some assistance with this. I created a YouTube example, which can be viewed in this PLNKR LINK: http://plnkr.co/edit/44EQKSjP3Gl566wczKL6?p=preview In my folder named embed, I have files titled p9zdCra9gCE and QrMOu4GU3uU, as shown belo ...

javascriptjqueryhtmlcss

Tips for grabbing specific column header text in tables with different id, name, or class using Jquery

I utilized the each() method to extract the table header text. However, my goal is to specifically target and retrieve the table header text labeled as 4.1. Here are the results: Below is the HTML table code: <form enctype="multipart/form-data&quo ...

jqueryajax

What steps should I take to design a mobile-friendly navigation bar?

I have shared the code for my navigation bar in a previous post Fixing Nav Bar to top of page. Now, I want to create a mobile version of it, but I am new to designing for mobile devices. Based on feedback and some CSS tweaking, I have managed to make it wo ...

htmlcss

When the tailwind utilities are implemented, they do not appear on the screen

Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I migh ...

cssnext.jstailwind-css

Ways to hide a div element when the size of the window is decreased

I need help with keeping my logo fixed on the header of my website. You can view an example of the issue here: Currently, when the window is resized to a certain height, the logo (The sun) changes position. How can I ensure that it remains fixed in place? ...

htmlcssfixedgraphical-logo

Use two separate AJAX requests to open and close the modal dialog

I am experiencing an issue with my subscription form that uses modal windows. After closing the window and trying to subscribe again, the ajax calls are being duplicated, resulting in an error. $("#openModal").click(function() { if($("#wname").val() = ...

javascriptphpjqueryajax

Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...

csslayoutfooter