Categories


Tags


网站侧边栏广告固定浮动效果的实现

对于页面内容很长的网站来说,经常会出现浏览内容的时候,侧栏已经空了,没内容了,这对于网站广告来说非常可以,如果侧栏空了之后能固定一个广告的话,那样对网站和用户双方的体验都不错,下面就说说具体实现的方法。

先在网站加入jquery.js,一般网站都已经加过这个js,因此可以跳过,没有用的网站则需要在网站header部分加入jquery.js代码。

之后,编辑侧栏模板,在侧栏最底部加入广告代码,代码如下:

<div id="float" class="float">

广告的HTML代码

</div>

最后,在网站底部增加如下的javascript代码即可:

$.fn.smartFloat = function() {

var position = function(element) {

var top = element.position().top, pos = element.css("position");

$(window).scroll(function() {

var scrolls = $(this).scrollTop();

if (scrolls > top) {

if (window.XMLHttpRequest) {

element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

}else {

element.css({

position: pos,

top: top

});

}

});

};

return $(this).each(function() {

position($(this));

});

};

$("#float").smartFloat();

来源:月光博客


Public @ 2009-05-01 15:45:17

收到无效字节,将禁用 UTF-8 编码。请在站点管理器中强制选择 UTF-8 编码。

", "145" => "该字段( %s) 是必需的 。", "146" => "文件", "147" => "文件夹", "148" => "上级文件夹", "149" => "刷新", "150" => "刷新列表", "151" => "切换视图", "152" => "切换到...", "153" => "切换到缩略图视图", "154" => "切换到详细列表视图", "155" =>

Public @ 2023-02-24 08:12:41

前端开发大众手册(包括工具、网址、经验等)

这里是一些前端开发的大众手册,包括工具、网址、经验等: 1. 工具篇: - 编辑器:VS Code、Sublime、Atom、WebStorm - 版本控制:Git、Sourcetree、GitHub - 包管理器:npm、yarn - UI 库:Bootstrap、Material-UI、Ant Design、Element UI - JS 框架:Vue、React、Angular、jQue

Public @ 2023-06-18 00:50:35

如何设计一个成功的网站

有以下几个关键因素可以帮助设计一个成功的网站: 1. 明确的目标和受众:确定网站的目标和受众,包括网站的定位、用户的需求和期望,可以帮助你更好地设计网站结构和内容。 2. 响应式设计:保证网站可以适应各种屏幕尺寸和设备,提供更好的用户体验。 3. 简洁清晰的布局:设计一个简单明了的布局,使用户能够轻松找到所需的信息。 4. 清晰的导航和标记:提供简单清晰的导航和标记,让用户能够快速找到需要

Public @ 2023-04-09 21:01:37

更多您感兴趣的搜索

0.546183s