/*搜索区块的颜色变化*/
function search(){
var searchBox = document.querySelector('.m_head');
var bannerBox = document.querySelector('.m_banner');
var classify =$('.m_classify a');
var news = $('.home_news a');
var oInput =$('.m_head .m_search input.input_bg');
var h = bannerBox.offsetHeight;
window.onscroll = function(){
var top = document.body.scrollTop;
var opacity = 0.2;
if( top < h/2){
opacity = top/h * 0.95;
classify.removeClass('classify_h_ico').addClass('classify_ico');
news.removeClass('news_h_ico').addClass('news_ico');
oInput.css("border","none");
}else{
opacity = 0.98;
classify.removeClass('classify_ico').addClass('classify_h_ico');
news.removeClass('news_ico').addClass('news_h_ico');
oInput.css("border","1px solid #eee");
}
searchBox.style.background = "rgba(255,255,255,"+opacity+")"; }
}
<div class="m_head">
<div class="m_classify">
<a href="javascript:void(0);" onClick="showClass('',this);" status='0' class="classify_ico"></a>
</div>
<div class="m_search">
<form name="theForm" id="theForm" action="" method="post">
<input type="text" name="keyword" id="keyword" placeholder="搜索商品、店铺" class="input_bg">
<a class="home_login" href="javascript:void(0);" onClick="javascript:jQuery('#theForm').submit();"></a>
</form>
</div>
<div class="home_news"> <a href="" class="news_ico"></a>
</div>
</div>

jQuery 首页搜索区域模块随页面滑动而变化的更多相关文章

  1. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  2. ionic2+Angular ionScroll页面滑动监听

    第一:需要在组件中引入相关模块: 第二:如果只是监听页面滑动,只需要标注@ViewChild(Content) content: Content;就可以了. 附加:如果要监听页面的某个元素,并对其进行 ...

  3. Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  4. appium---App页面滑动

    我们操作app的过程中都会进行页面滑动,那么这个过程通过python怎么实现呢? 如何滑动 大家都非常的清楚我们手动在app上是如何滑动的,然后自动化只是模仿了手工的方法去实现,我们通过一个图来分析 ...

  5. IOS的H5页面滑动不流畅的问题:

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  6. JQuery实现的模块交换动画效果

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. jQuery加载一个html页面到指定的div里

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里.比如:加载a.html里面的<div id=“row"> ...

  8. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  9. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

随机推荐

  1. YTU 2903: A--A Repeating Characters

    2903: A--A Repeating Characters 时间限制: 1 Sec  内存限制: 128 MB 提交: 50  解决: 30 题目描述 For this problem,you w ...

  2. POJ - 1986 Distance Queries(离线Tarjan算法)

    1.一颗树中,给出a,b,求最近的距离.(我没考虑不联通的情况,即不是一颗树的情况) 2.用最近公共祖先来求, 记下根结点到任意一点的距离dis[],这样ans = dis[u] + dis[v] - ...

  3. 软件开发-MSF方法(《构建之法》读书笔记2)

    MSF-微软解决方案框架,是一套大型系统开发指南,它描述了如何用组队模型.过程模型和应用模型来开发Client/Server结构的应用程序,是在微软的工具和技术的基础上建立并开发分布式企业系统应用的参 ...

  4. mac下安装eclipse+CDT

    测试文件test.cpp #include <iostream>using namespace std; int main() {    cout << "!!!He ...

  5. python-----群发图片

    使用wxpy库给3个人群发同一张图片 #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/2/22 15:25 # @Author ...

  6. 计算属性computed 与methods

    你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果: <p>Reversed message: "{{ reversedMessage() }}" ...

  7. fiddler工具使用

    一.安装 a) 百度fiddler ,下载, 安装 ,无脑流 二.界面介绍 a) 工具栏与状态栏 其中保存是,可以为两种形式:1.text文本形式 2.saz文件结尾数据(能被fiddler软件识别) ...

  8. Luogu P3619 魔法 【贪心/微扰证明】

    题目描述 cjwssb知道是误会之后,跟你道了歉.你为了逗笑他,准备和他一起开始魔法.不过你的时间不多了,但是更惨的是你还需要完成n个魔法任务.假设你当前的时间为T,每个任务需要有一定的限制ti表示只 ...

  9. 如何快捷安装并配置MySQL 下载破解Navicat for mysql

    首先,要先下载MySQL,进官网下载相应的mysql版本,这个不收费,实在不知道的可以参考一下这篇:https://blog.csdn.net/qq_37172528/article/details/ ...

  10. Manven下载

        1.下载地址:http://maven.apache.org/download.cgi          2.点击下载链接          3.解压zip到安装路径  我的:C:\Progr ...