html左侧浮动广告代码,网站侧边栏广告固定浮动效果的实现「建议收藏」

html左侧浮动广告代码,网站侧边栏广告固定浮动效果的实现「建议收藏」对于页面内容很长的网站来说,经常会出现浏览内容的时候,侧栏已经空了,没内容了,这对于网站广告来说非常可以,如果侧栏空了之后能固定一个广告的话,那样对网站和用户双方的体验都不错,下面就说说具体实现的方法。先在网站加入jquery.js,一般网站都已经加过这个js,因此可以跳过,没有用的网站则需要在网站header部分加入jquery.js代码。之后,编辑侧栏模板,在侧栏最底部加入广告代码,代码如下:…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

86d94d4814f6775cdae0db96b1ba0f2d.gif

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

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

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

广告的HTML代码

最后,在网站底部增加如下的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();

a3de50a3ae21927f9253641753742bd1.png

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/191625.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Win10安装jdk11及环境变量配置

    Win10安装jdk11及环境变量配置Win10安装jdk11及环境变量配置写在前面卸载旧版本jdk下载jdk11配置环境变量经验教训写在前面我第一次安装java是在17年初,距离现在已经一年半了。今天上oracle官网一看,jdk都已经更新到11.0.1了,然而我用的还是1.8.0_171版本的老古董,遂决定把jdk升级一下,结果没想到这一升级就折腾了老半天。在这里把我的升级的详细步骤以及经验教训和大家分享一下。卸载旧版本jd…

    2022年7月24日
  • 如何配置IIS运行 ASPX「建议收藏」

    如何配置IIS运行 ASPX「建议收藏」如何配置IIS运行ASPX最近在做.ASPX搞了好一阵子,才弄懂这个东西,和大家分享……欢迎讨论一、先注册asp.net组件:(asp.NET组件即:.NetFramework)开始->运行->cmd->执行命令:C:\windows\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe-i(你的.net组件…

    2022年11月1日
  • ffmpeg添加视频封面_ffmpeg提取波形文件

    ffmpeg添加视频封面_ffmpeg提取波形文件ffmpeg-ia.mp4-y-fimage2-frames1a.jpgffmpeg-i11.mp4-vframes1xx.jpgffmpeg-ia.mp4-r0.1frames_%04.pngconvert-backgroundwhite-flatten***.pdf***.png

    2022年10月31日
  • python分割字符串输出_python字符串分割「建议收藏」

    python分割字符串输出_python字符串分割「建议收藏」内置split()函数str.split(sep=None,maxsplit=-1)sep为自定义分割符,maxsplit为最大分割次数,默认值-1进行全部分割注意以下区别:str.split()以空格分割,包括连续空格str.split(”)同样以空格分割,但是不能识别连续空格,会返回两空格之间的空字符串python3docre模块的split()函数re.split(patte…

    2022年5月25日
  • 美化包软件_html简单进度条插件

    美化包软件_html简单进度条插件前言在我们进行自动化测试的时候,用例往往是成百上千,执行的时间是几十分钟或者是小时级别。有时,我们在调试那么多用例的时候,不知道执行到什么程度了,而pytest-sugar插件能很好解决我们的痛点。

    2022年7月30日
  • PHP 数组截取 array_slice() 函数

    PHP 数组截取 array_slice() 函数定义和用法array_slice()函数在数组中根据条件取出一段值,并返回。注释:如果数组有字符串键,所返回的数组将保留键名。(参见例子4)语法array_slice(array,offset,length,preserve)参数array必需。规定输入的数组。offset必需。数值。规定取出元素的开始位置。如果是正数,则从前往后开始取,如果是负值,从

    2022年5月17日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号