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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • wxPython的基础教程

    wxPython的基础教程写在前面的话:上个假期学习了Python,发现它真的是一门很有趣的语言,所以这学期想学一些python的可视化编程,于是选择了wxPython。但是我在网上找中文教程找了好久都没有找到中文的教程(额,也许是我方法不对),无奈只好看英文的啦。于是在这个网站上看完了wxPython的基础教程,但是为了方便广大网友所以决定将这个网页中的内容翻译过来。花费了3个晚上的时间,终于把它翻译完了。但是我只是一个

  • Java内存管理-JVM内存模型以及JDK7和JDK8内存模型对比总结(三)

    勿在流沙住高台,出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!上一篇分享了JVM及其启动流程,今天介绍一下JVM内部的一些区域,以及具体的区域在运行过程中会发生哪些异内存常! 其实也就对应了内存管理的第一篇中 JVM的第三个阶段,程序运行内存溢出。知识地图:一、概述Java的内存管理采用[自动内存管理]机制,因为这个自动管理机制,Ja…

  • css – transition

    css – transitiontransition:all0.3sease0s;transition:width2s;transition:background-color0.3slinear0s

    2022年10月30日
  • CompletableFuture使用详解

    CompletableFuture使用详解一、简介1.1概述在上一篇文章《CompletionService使用与源码分析》中,已经介绍过了Future的局限性,它没法直接对多个任务进行链式、组合等处理,需要借助并发工具类才能完成,实现逻辑比较复杂。而CompletableFuture是对Future的扩展和增强。CompletableFuture实现了Future接口,并在此基础上进行了丰富的扩展,完美弥补了Future的局限性,同时CompletableFuture实现了对任务编排的能力。借助这项能力,可以轻松地组织不同任务的运行顺序、

  • Request对象的用法「建议收藏」

    Request对象的用法「建议收藏」request对象,是浏览器访问服务器的一次请求对象,封装了http协议请求头和请求正文数据                         是一次请求,数据于多次请求是不共享的,但是请求的对象是同一个System.out.println(request); if(request.getAttribute(“name”)==null){ request.setAttribute

  • python中内建函数isinstance的用法

    python中内建函数isinstance的用法今天上午学习了isinstance,有一点理解,就记录下来了(不知道对不对)语法:isinstance(object,type)作用:来判断一个对象是否是一个已知的类型。其第一个参数(object)为

发表回复

您的电子邮箱地址不会被公开。

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