suchen
HeimWeb-Frontendjs-Tutorial博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)_javascript技巧

当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站。

现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多、内容较长的网站。志文工作室调研了几种类似功能的实现方法,摘录之以供参考。

参考一、提高浏览量的特效:侧栏跟随滚动条

来源:卢松松博客
http://lusongsong.com/reed/453.html

代码如下:

CSS部分:

复制代码 代码如下:

/*侧栏跟随*/  
#box{float:left; position:relative;width:250px;}
.div1{width:250px;}
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:250px;,把这段代码添加到你的CSS文件中即可。

JS部分:

JavaScript代码

复制代码 代码如下:

//侧栏跟随   
(function(){   
    var oDiv=document.getElementById("float");   
    var H=0,iE6;   
    var Y=oDiv;   
    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};   
    iE6=window.ActiveXObject&&!window.XMLHttpRequest;   
    if(!iE6){   
        window.onscroll=function()   
        {   
            var s=document.body.scrollTop||document.documentElement.scrollTop;   
            if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}   
            else{oDiv.className="div1";}       
        };   
    }   
})();  

注:这段代码可放入任意JS文件中,比如我放在了util.js 文件里。

网页代码部分:

复制代码 代码如下:

  
    
这里写你网站的代码与标签   
  
  

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。Z-blog用户把此段代码添加到single.html的侧栏位置即可。

特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。

参考二、添加侧边栏随滚动条滚动效果(示例)

来源:自由的风博客(http://loosky.net/?p=2028)

步骤如下:

1、给侧边栏的各个模块加上一些class标志
如果你的侧边栏之前已经有了这些class标志加以区分,只要使用就可以了,不用另外加。添加ID也可以实现效果,但w3c标准不允许同一页面出现多个同样的ID,所以最好用class样式方式。

2、在网站页面中的任意js文件中加上如下代码:

JavaScript代码

复制代码 代码如下:

var rollStart = $('.Statistics'), //滚动到此区块的时候开始随动   
rollOut = $('.WidgetMeta,.Statistics'); //隐藏rollStart之后的区块   
rollSet = $('.RRPosts,.TagsCloud'); //添加rollStart之前的随动区块   

rollStart.before('
');   
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();   
objWindow.scroll(function() {   
if (objWindow.scrollTop() > offset.top){   
if(rollBox.html(null)){   
rollSet.clone().prependTo('.rollbox');   
}   
rollOut.fadeOut();   
rollBox.show().stop().animate({top:0,paddingTop:10},400);   
} else {   
rollOut.fadeIn();   
rollBox.hide().stop().animate({top:0},400);   
}   
});  

注:滚动区域的内容不能太长,不然会出现无限下拉的情况。

参考三、JQUERY SCROLL FOLLOW

这是一个插件,添加步骤也很简单,下载压缩包解压到网站目录,然后按照步骤操作即可。
详细可参考:
http://kitchen.net-perspective.com/open-source/scroll-follow/

示例页面:
http://kitchen.net-perspective.com/sf-example-1.html
http://kitchen.net-perspective.com/sf-example-2.html
http://kitchen.net-perspective.com/sf-example-3.html
http://kitchen.net-perspective.com/sf-example-4.html

侧栏模块随窗口滑动(示例页面)
来源:http://www.mb-wx.com/common/msay.js
这段代码来自木本无心的博客(pjblog),原理很简单,就是当窗口到达指定模块位置后,开始判断其距离顶端的距离并进行调整。该段代码结合应用在了志文工作室博客侧边栏。

JavaScript代码

复制代码 代码如下:

//侧栏模块随窗口滑动   
jQuery(document).ready(function($) {   
 $(function() {   
  var $sidebar = $("#Side_relativelog"),   
  $window = $(window),   
  offset = $sidebar.offset(),   
  topPadding = 0;   
  $window.scroll(function() {   
   if ($window.scrollTop() > offset.top) {   
    $sidebar.stop().animate({   
     marginTop: $window.scrollTop() - offset.top + topPadding   
    });   
   } else {   
    $sidebar.stop().animate({   
     marginTop: 0   
    });   
   }   
  });   
 });   
}); 
Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
微软将 Windows 11 的 Fluent 滚动条引入 Google Chrome微软将 Windows 11 的 Fluent 滚动条引入 Google ChromeApr 14, 2023 am 10:52 AM

与 Windows 10 不同,Windows 11 具有新的现代“流畅滚动条”,当用户与之交互时会改变形状。Fluent 滚动条本质上是动态的,它们会在不同的外形尺寸或当您更改窗口大小时自动缩放,并且它目前在设置、媒体播放器等应用程序中使用。根据微软的一项新提议,谷歌浏览器可能很快就会拥有流畅的滚动条功能。微软在一份提案中表示,他们希望对 Chrome 中的旧滚动条进行现代化

react怎么隐藏滚动条滚动react怎么隐藏滚动条滚动Dec 21, 2022 pm 03:38 PM

react隐藏滚动条滚动的方法:1、打开相应的“react-native”文件;2、通过horizontal设置水平滚动;3、通过设置“showsHorizontalScrollIndicator”的值为“false”来隐藏水平滚动条即可。

Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法Mac系统滚动条怎么设置始终显示-滚动条设置始终显示的方法Mar 18, 2024 pm 06:22 PM

近日有一些小伙伴咨询小编Mac系统滚动条怎么设置始终显示?下面就为大家带来了Mac系统滚动条设置始终显示的方法,有需要的小伙伴可以来了解了解哦。第一步:在系统开始菜单,选择【系统偏好设置】选项。第三步:在系统偏好设置页面,选择【通用】选项。第三步:在通用页面,选择【始终】显示滚动条。

如何编写HTML滚动条文本框代码如何编写HTML滚动条文本框代码Feb 19, 2024 pm 07:38 PM

标题:如何编写带滚动条的HTML文本框代码HTML中的文本框是常用的用户输入控件之一,在某些情况下,文本内容过长时会导致文本框显示不完整。这时,我们可以通过添加滚动条来让文本框支持滚动查看。本文将详细介绍如何编写带滚动条效果的HTML文本框代码,并给出具体的代码示例。一、使用textarea元素创建文本框在HTML中,我们使用textarea元素来创建文本框

html滚动条怎么做html滚动条怎么做Feb 22, 2024 pm 03:24 PM

HTML滚动条怎么做,需要具体代码示例在网页设计中,滚动条是一个常见的元素,它可以使网页在内容过多的情况下,能够方便地滚动查看。本文将介绍如何使用HTML创建滚动条,并提供具体的代码示例。首先,我们需要了解HTML中创建滚动条的基本原理。HTML中可以使用CSS样式来控制滚动条的外观和行为。具体来说,我们可以使用CSS属性对滚动条进行设置,其中常用的属性有o

如何在 Windows 11 中启用或禁用滚动条始终显示?如何在 Windows 11 中启用或禁用滚动条始终显示?Apr 24, 2023 pm 05:58 PM

当滚动条未激活或未使用时,Windows操作系统允许用户指定是否应自动隐藏它们。另一方面,Windows默认启用滚动条。如果任何用户想在他们的系统上启用或禁用此功能,请参阅这篇文章,帮助他们了解如何操作。如何在Windows11中启用或禁用始终显示滚动条1.按住Windows+U键将打开系统上的辅助功能页面。2.通过单击它来选择视觉效果,它位于辅助功能页面的顶部。3.如果要在系统上启用始终显示滚动条功能,请点击始终显示滚动条切换按钮将其打开,如下所示。4.您可以随时通过单击“始终显示

Chrome 即将推出符合 Windows 11 风格的重叠滚动条特性Chrome 即将推出符合 Windows 11 风格的重叠滚动条特性Apr 23, 2023 pm 06:40 PM

正如我们大多数人现在所知道的那样,新的Microsoft操作系统Windows11具有覆盖滚动条,当我们接近或使用它们时会改变形状。您可能想知道同样的动态特性也在Chromium浏览器中进行测试。这基本上意味着Chrome浏览器即将推出的Windows11实验版本可能很快就会具有覆盖滚动条功能。Chrome很快就会有Windows11风格的覆盖滚动条自2021年8月以来,这家总部位于雷德蒙德的科技公司一直在基于Chromium的Edge网络浏览器中不断测试其

如何设置html滚动条样式如何设置html滚动条样式Oct 11, 2023 am 10:08 AM

html滚动条样式设置可以用scrollbar-width、scrollbar-color、::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-track等。详细介绍:1、scrollbar-width,用于设置滚动条的宽度,可以使用thin、auto或者其他具体的宽度值来设置等等。

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version