随窗体滑动的小插件sticky源码

代码如下:

$.fn.stickyfloat = function(options, lockBottom) {
                var $obj                 = this;
                var parentPaddingTop     = parseInt($obj.parent().css('padding-top'));
                var startOffset         = $obj.parent().offset().top;
                var opts                 = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

$obj.css({ position: 'absolute' });

if(opts.lockBottom){
                    var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
                    if( bottomPos < 0 )
                        bottomPos = 0;
                }

$(window).scroll(function () {
                    $obj.stop();

var pastStartOffset            = $(document).scrollTop() > opts.startOffset;  
                    var objFartherThanTopPos    = $obj.offset().top > startOffset;  
                    var objBiggerThanWindow     = $obj.outerHeight() < $(window).height();

if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
                        var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
                        if ( newpos > bottomPos )
                            newpos = bottomPos;
                        if ( $(document).scrollTop() < opts.startOffset )
                            newpos = parentPaddingTop;

$obj.animate({ top: newpos }, opts.duration );
                    }
                });
            };

使用方法很简单：只要在页面中引入该插件，然后用选择器调用：


代码如下:

$('#menu15').stickyfloat({ duration: 500 });
$('#menu14').stickyfloat({ duration: 500 });
$('#menu13').stickyfloat({ duration: 500 });
$('#menu12').stickyfloat({ duration: 500 });

　　后面的duration参数表示滑动的速度，越大越慢。

赞 (0)

相关推荐

  • 使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法

    sticky组件,通常应用于导航条或者工具栏,当网页在某一区域滚动的时候,将导航条或工具栏这类元素固定在页面顶部或底部,方便用户快速进行这类元素提供的操作. 在这篇文章Sticky组件的改进实现提供了一个改进版的sticky组件,并将演示效果应用到了自己的博客.有了类似sticky的这种简单组件,我们就可以在利用它开发更丰富的效果,比如本文要介绍的tab导航和滚动导航.实现简单,演示效果如下: tab导航(对应tab-sticky.html): 滚动导航(对应nav-scroll-sticky.

  • 浅谈Sticky组件的改进实现

    浅谈Sticky组件的改进实现

    在上一篇文章使用getBoundingClientRect方法实现简洁的sticky组件的方法介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多不足的地方,另外跟别的网站上实现的效果在取消固定的时候也有一些不同,上次提供的取消固定的处理方式不好,本文在上文的基础上,提供一个改进版的sticky组件,功能更加完善,希望您有兴趣阅读. 1. 旧版本的问题 上一个sticky组件的实现中,有多个问题存在: 第一,从sticky的效果上来说,sticky元素在固定前后,不

  • 随窗体滑动的小插件sticky源码

    复制代码 代码如下: $.fn.stickyfloat = function(options, lockBottom) {                var $obj                 = this;                var parentPaddingTop     = parseInt($obj.parent().css('padding-top'));                var startOffset         = $obj.parent()

  • 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    6款经典实用的jQuery小插件及源码(对话框/提示工具等等)

    jQuery是一款当之无愧的JS开源框架,凭借其小巧实用占领了很大的开发市场,jQuery另外一个优势就是拥有丰富多彩的插件,这些插件可以帮助你简化很多的开发过程.下面介绍的6款实用jQuery小插件及源码,希望大家喜欢. 1.jQuery智能单词提示工具 这是一款可以根据当前输入智能提示单词的插件,效果很棒. 在线演示 /源码下载 2.CSS3实现的Photoshop按钮效果 这是用jQuery和CSS3实现的Photoshop按钮效果. 在线演示 /源码下载 3.jQuery自定义确认对话框

  • JS库particles.js创建超炫背景粒子插件(附源码下载)

    JS库particles.js创建超炫背景粒子插件(附源码下载)

    插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果             源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba

  • Java实战之贪吃蛇小游戏（源码+注释）

    Java实战之贪吃蛇小游戏（源码+注释）

    一.工程文件 二.Main.java package com.company; import javax.swing.*; public class Main { public static void main(String[] args) { //创建窗体对象 JFrame frame = new JFrame(); //创建窗体参数() frame.setBounds(10,10,900,720); //设置不允许更改大小 //frame.setResizable(false); //设置关

  • 微信 小程序前端源码详解及实例分析

    微信 小程序前端源码详解及实例分析

    微信小程序前端源码逻辑和工作流 看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLau

  • 小米5s微信跳一跳小程序python源码

    本文实例为大家分享了微信跳一跳小程序python源码,供大家参考,具体内容如下 微信跳一跳小程序小米5s源码python,搭建环境后亲测可用. # coding: utf-8 import os import sys import subprocess import shutil import time import math from PIL import Image, ImageDraw import random import json import re # === 思路 === # 核

  • 使用Python给头像加上圣诞帽或圣诞老人小图标附源码

    随着圣诞的到来,想给给自己的头像加上一顶圣诞帽.如果不是头像,就加一个圣诞老人陪伴. 用Python给头像加上圣诞帽,看了下大概也都是来自2017年大神的文章:https://zhuanlan.zhihu.com/p/32283641 主要流程 素材准备 人脸检测与人脸关键点检测 调整大小,添加帽子 用dlib的正脸检测器进行人脸检测,用dlib提供的模型提取人脸的五个关键点 调整帽子大小,带帽 选取两个眼角的点,求中心作为放置帽子的x方向的参考坐标,y方向的坐标用人脸框上线的y坐标表示.然后我

  • Flutter随机迷宫生成和解迷宫小游戏功能的源码

    此博客旨在帮助大家更好的了解图的遍历算法,通过Flutter移动端平台将图的遍历算法运用在迷宫生成和解迷宫上,让算法变成可视化且可以进行交互,最终做成一个可进行随机迷宫生成和解迷宫的APP小游戏.本人是应届毕业生,希望能与大家一起讨论和学习- 注:由于这是本人第一次写博客,难免排版或用词上有所欠缺,请大家多多包涵. 注:如需转载文章,请注明出处,谢谢. 一.项目介绍: 1.概述 项目名:方块迷宫 作者:沫小亮. 编程框架与语言:Flutter&Dart 开发环境:Android Studio 3

  • Java实现贪吃蛇大作战小游戏(附源码)

    Java实现贪吃蛇大作战小游戏(附源码)

    目录 1.开发环境及游戏展示 1.1 游戏主界面 1.2 移动界面 1.3 奖励界面 1.4 F加速功能界面 1.5 死亡界面 2.需求分析 3.系统设计 3.1 系统总体功能设计 3.2 系统总体流程设计 4.功能设计 4.1 贪吃蛇移动及加速功能设计 4.2 贪吃蛇吃食物加速及死亡判定功能的设计 4.3 贪吃蛇主动加速功能的设计 4.4 贪吃蛇奖励机制功能的设计 5.项目结构与项目实现 5.1 项目结构及类间关系 5.2 项目完整源码 1.开发环境及游戏展示 贪吃蛇大作战在设计与实验的过程中

  • 分享一个我自己写的ToolTip提示插件(附源码)

    分享一个我自己写的ToolTip提示插件(附源码)

    继续分享一个我自己写的 ToolTip提示插件,希望大家支持我,给我点评论,哪怕骂我的也好啊,让我知道有人在关注我"小豆" 嘿嘿.废话不多说上代码! 复制代码 代码如下: $.fn.ToolTip = function (option) { var defaults = { direction: "down", star: function () { }, from: $(this), url: '../images/arrow.png' }; //方法内基础变量

随机推荐

其他