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


相关推荐

  • css 渐变背景_照片背景换成蓝色渐变

    css 渐变背景_照片背景换成蓝色渐变CSS渐变背景看这一篇就够了在我们自己设计网页的时候,为了好看美观,颜色可谓是最让人头疼的一部分。尤其是在配色上又找不到一些好看的网站。今天我就来记录一些好看的渐变式背景,和一些常用的颜色网站。CSS渐变使可以显示两种或多种指定颜色之间的平滑过渡。让我们来玩一玩,看能玩出什么花来。CSS定义了两种渐变类型:一、线性渐变(向下/向上/向左/向右/对角线)我们通过属性linear-gradient来这样定义一个线性渐变。background-image:linear-gradient(方向

    2022年10月22日
    1
  • Tomcat配置域名_tomcat nginx

    Tomcat配置域名_tomcat nginx总结一下Tomact中配置域名。第一种方式:(个人认为是最简单,我经常使用的)

    2022年10月3日
    1
  • js获取当前时间年份_js输入年月日,判断是这年的第几天

    js获取当前时间年份_js输入年月日,判断是这年的第几天vardate=newDate();date.getYear();//获取当前年份(2位)date.getFullYear();//获取完整的年份(4位)date.getMonth();//获取当前月份(0-11,0代表1月)date.getDate();//获取当前日(1-31)date.getDay();//获取当前星期X(0-6,0代表星期天)date.getTime();//获取当前时间(从1970.1.1开始的毫秒数)date.getH

    2025年7月2日
    0
  • pycharm怎么编译代码_python编程

    pycharm怎么编译代码_python编程python可以说是新的编程语言,虽说是新编程,但一出来,就受到很长程序员的关注,而且刚出现和java进行对比,很多人就拿python和java进行比较,想python到底好不好,他和java有什么区别,要想知道他们的区别,还是要了解python比较好,要知道python知识,今天我们就来看看python里的pycharm编写代码的方式教学。1、新建项目location:为创建项目的地址(或者叫文…

    2022年8月28日
    1
  • StartActivityForResult详解

    StartActivityForResult详解转载自:https://www.cnblogs.com/zgqys1980/p/5286208.html 一、如果想在Activity中得到新打开Activity关闭后返回的数据,需要使用系统提供的startActivityForResult(Intentintent,intrequestCode)方法打开新的Activity,新的Activity关闭后会向前面的Activity…

    2022年7月11日
    14
  • sqlyog13.1.6激活成功教程版_sqlyog10.0安装教程

    sqlyog13.1.6激活成功教程版_sqlyog10.0安装教程1、SQLyog-12.2.4-0.x64Trial.exe,直接去官网下载。2、修改注册表项开始-运行-regedit,进入注册表HKEY_CURRENT_USER\Software\SQLyog修改权限拒绝修改。OK,激活成功教程完成。试用14天一直可以使用下去转载于:https://www.cnblogs…

    2022年9月14日
    0

发表回复

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

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