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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 正则表达式判断字符有乱码(正则文法转正则表达式)

    #include<QtCore/QCoreApplication>#include<iostream>#include<string>#include<regex>usingnamespacestd;intmain(intargc,char*argv[]){ QCoreApplicationa(argc,argv); boolfoundmatch=false; try{ std::wregexre(L

    2022年4月11日
    307
  • Java中的map集合顺序如何与添加顺序一样

    Java中的map集合顺序如何与添加顺序一样一般使用map用的最多的就是hashmap,但是hashmap里面的元素是不按添加顺序的,那么除了使用hashmap外,还有什么map接口的实现类可以用呢?这里有2个,treeMap和linkedHashMap,但是,要达到我们的要求:按添加顺序保存元素的,就只有LinkedHashMap。下面看运行的代码。packagecom.lxk.collectionTest;impor…

    2022年5月30日
    107
  • Java中的注解 – @NotNull「建议收藏」

    Java中的注解 – @NotNull「建议收藏」比如说,你写了一个后台系统,接收用户的请求,经过运算后返回结果,很通用的一个实现方案。假定所有的方法都需要校验参数是否为空,不然就可能有NullPointerException,如果系统有N个接口,每个接口参数有M个,你需要写N*M个if判断语句。如if(StringUtils.isBlank(request.getA())){thrownewIllegalArgume…

    2022年5月30日
    37
  • servu搭建ftp服务器教程_本地ftp服务器

    servu搭建ftp服务器教程_本地ftp服务器轉自solar的博客:无心阁@solarFTP:意思就是:文件传输协议。说白了,就是提供一个服务,让网上的人,可以从你的电脑上下载资源的共享方式。一。所需“装备”1.域名2.软件:Serv-U下载地址:http://www.piaodown.com/down/soft/154.htm二。软件安装这里不想多说了,我上面提供的是绿色版,软件安装后,会自动运行

    2022年9月11日
    1
  • java httprequest选项_HTTPRequest类

    java httprequest选项_HTTPRequest类原标题:HTTPRequest类HTTPRequest类java.lang.Objectcom.google.appengine.api.urlfetch.HTTPRequestpublicclassHTTPRequest扩展java.lang.ObjectHTTPRequest封装通过URLFetchService进行的单个HTTP请求。构造函数概述HTTPRequest(ja…

    2022年6月29日
    23

发表回复

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

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