`
axl234
  • 浏览: 268841 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js页面滚动浮动层智能定位(jQuery) 类似淘宝工具条

阅读更多
HTML代码:
<div class="float" id="float"> 我是个腼腆羞涩的浮动层<img src="http://web2.qq.com/style/face/6.gif" title="含羞">,你可以轻轻地<a href="http://www.zhangxinxu.com/php/regist.php">点击我</a>(去注册页)。</div>JS代码:
$.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: "absolute",
                    top: top
                });   
            }
        });
    };
    return $(this).each(function() {
        position($(this));                        
    });
};

//绑定
$("#float").smartFloat();  <style>.demo{height:1500px;}.float{width:60px; padding:10px; border:1px solid #ffecb0; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; right:10%; top:131px;}</style>
分享到:
评论

相关推荐

    类似QQ空间上方浮动工具条(jquery)

    标题中的“类似QQ空间上方浮动工具条(jquery)”是指一种网页设计技术,它涉及到使用JavaScript库jQuery来创建一个类似于QQ空间顶部的浮动工具栏。这种工具条通常包含一系列功能按钮或链接,如消息通知、设置选项、...

    jQuery页面滚动显示浮动菜单栏锚点定位效果

    本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能对于提高用户体验,尤其是内容丰富的长页面,是非常有用的,因为它可以帮助用户快速导航到页面的不同...

    jQuery鼠标滚动条到页面底部浮动层滑动弹出信息

    本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在HTML...

    jquery百度百科底部浮动导航页面滚动预览

    《jQuery实现百度百科底部浮动导航页面滚动预览详解》 在网页设计中,提升用户体验是一项重要的任务,而底部浮动导航栏则是一种常见的优化手段。它可以让用户在浏览长页面时,始终保持导航菜单可见,便于快速跳转。...

    jquery ui页面滚动底部显示浮动弹出层图文列表展示

    本文将深入探讨如何使用 jQuery UI 实现一个功能:当页面滚动到底部时,显示一个浮动的弹出层,用于展示图文列表。这个功能在许多网站中常见,比如加载更多内容、展示评论或广告等。 首先,我们需要理解 jQuery UI ...

    jquery浮动固定层导航条点击页面滚动到设置的描点位置

    "jquery浮动固定层导航条点击页面滚动到设置的描点位置"是一个常见的功能,它涉及到jQuery库的使用以及HTML锚点定位技术。下面将详细解释这个知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript...

    jquery弹出左侧隐藏的浮动层

    对于"jquery弹出左侧隐藏的浮动层"这个主题,我们将探讨如何使用jQuery来实现这样的功能,即在用户触发特定事件时,从页面左侧弹出一个之前隐藏的浮动层。 首先,我们需要在HTML中创建浮动层的基本结构。这个浮动层...

    jQuery右侧滚动条浮动在线客服代码点击展开收缩

    【jQuery右侧滚动条浮动在线客服代码点击展开收缩】 在网页设计中,为了提供更好的用户体验,很多网站都会在页面右侧设置一个浮动的在线客服系统。这种系统通常包含一个可展开和收缩的聊天窗口,用户可以随时点击与...

    div模块层随页面滚动遇顶固定的两种方法(js&jQuery)

    例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动...

    jQuery左侧浮动跟随鼠标上下滚动菜单代码

    本教程将详细讲解如何利用jQuery实现一个左侧浮动且跟随鼠标上下滚动的菜单代码。 首先,我们需要理解jQuery的核心概念。jQuery简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它的语法简洁明了,使得...

    jQuery实现浮动层随浏览器滚动条滚动的方法

    标题中的“jQuery实现浮动层随浏览器滚动条滚动的方法”指的是在网页开发中,使用jQuery库来创建一个元素(通常是一个导航栏或者侧边栏),使其在用户滚动浏览器页面时始终保持在屏幕的可见区域,通常是固定在顶部。...

    Jquery任意位置浮动固定层【插件】

    "Jquery任意位置浮动固定层"插件是一个轻量级的解决方案,用于使页面上的任意元素在用户滚动页面时保持在屏幕的特定位置。它适用于创建侧边栏、导航菜单或任何需要随滚动保持可视的元素。该插件的核心在于利用jQuery...

    jQuery 网页尾部滑动而出的浮动层,可关闭.rar

    当滚动条达到预设位置(通常是页面底部)时,触发浮动层的显示动画。 浮动层的显示动画可以通过jQuery的`animate()`方法实现,它可以改变CSS属性,如高度、透明度等,以创建平滑的过渡效果。同时,为了实现关闭功能...

    多种Jquery页面效果

    基于jquery+css3的固定的网页底部的炫酷工具条 基于jQuery的超强多媒体幻灯展示效果 基于jQuery的很酷的弹出层效果js插件 基于jQuery的可爱T恤折叠和展开效果的实现代码 基于jQuery的类似旋转木马的3D分享按钮效果的...

    Asp.net 2.0 自定义控件开发[浮动工具条控件].rar

    7. **CSS和JavaScript**:为了实现浮动效果,通常会结合CSS样式和JavaScript/jQuery来定位工具条,使其始终在页面的某个位置浮动。例如,可以使用position: fixed属性,并通过JavaScript监听窗口滚动事件来实时调整...

    jQuery侧面浮动对联广告

    jQuery 侧面浮动对联广告是一种常见的网页交互设计技术,它利用 jQuery 库的高效功能来实现广告在页面滚动时始终保持在用户视线范围内。这种广告形式通常出现在网站的侧边栏,能够持续吸引用户的注意力,提高广告的...

    jquery floatmenu 浮动变化的个性菜单

    jQuery Floatmenu,正如其名,旨在为网站提供一种随滚动条上下浮动的菜单,使得用户无论在页面的哪个位置都能轻松访问导航选项。这种设计提高了用户体验,特别是对于内容丰富的长页面,用户无需滚动回顶部就能找到...

    仿淘宝跟踪浮动条效果

    在这个项目中,我们将探讨如何实现类似淘宝那样的跟踪浮动条,包括它的主要功能、实现原理以及可能涉及的技术栈。 首先,跟踪浮动条(通常称为悬浮导航或固定头部)是一种设计元素,它始终保持在页面的某个位置,...

    js浮动toolbar

    JavaScript(简称JS)浮动toolbar是一种常见的前端开发技术,它用于创建在用户滚动页面时始终保持在视口中的工具栏。这种设计通常用于提供导航、搜索功能或者编辑工具,以提高用户体验,让用户可以方便地访问这些...

    jQuery仿百度百科右侧浮动菜单特效

    总的来说,"jQuery仿百度百科右侧浮动菜单特效"是通过jQuery对DOM操作、事件处理和页面滚动的监听,结合适当的动画效果,为用户创建了一个直观、易用的页面导航工具。这种技术在现代网页开发中非常常见,能提升用户...

Global site tag (gtag.js) - Google Analytics