1# jQuery实现在鼠标滚动后导航栏保持固定
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,span,input{
margin:0;padding:0;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
margin: 0 auto;
left: 0;
z-index: 10000;
background: pink;
}
</style>
</head>
<body style="height: 2000px">
<div>sadadasd</div>
<div class="header-bottom">
<div class="top-nav">
<ul>
<li><a href="home" class="scroll" >首页</a></li>
<li><a href="about" class="scroll">关于我们</a></li>
<li><a href="services" class="scroll">服务领域</a></li>
<li><a href="project" class="scroll">业务案例</a></li>
<li><a href="references" class="scroll">合作伙伴</a></li>
<li><a href="activities" class="scroll">官方活动</a></li>
<li><a href="news" class="scroll">新闻资讯</a></li>
<li><a href="contact" class="scroll">联系我们</a></li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
var navOffset = $(".header-bottom").offset().top;
$(window).scroll(function(){
var scrollPos = $(window).scrollTop();
if(scrollPos >= navOffset){
$(".header-bottom").addClass("fixed");
}else{
$(".header-bottom").removeClass("fixed");
}
});
});
</script>
</body>
</html>
2#overlay
css：
.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #000;
opacity: .8;
display: none;
}
.fullscreen-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
background: #000;
}
Jq：
$hamburger.on('click', function() {
$menu_mobile.addClass('active');
$menu_mobile.hasClass('slide-in') ? $menu_mobile.removeClass('slide-in').addClass('slide-out') : $menu_mobile.removeClass('slide-out').addClass('slide-in');
var $overlay = $('.fullscreen-overlay');
var $body = $('body');
$overlay.css('display', '');
if($overlay.length <= 0) {
$body.append('<div class="fullscreen-overlay"></div>');
$overlay = $('.fullscreen-overlay');
}
if($menu_mobile.hasClass('slide-out')) {
$overlay.css('display', 'none');
}
$overlay.on('click', function() {
$(this).css('display', 'none');
$menu_mobile.removeClass('slide-in').addClass('slide-out');
});
});
3 # jQuery实现显示隐藏加动画
2018-07-10 at 2.17 pm.gif
html
<div class="posting-tips open">
<div class="tips-title">
Posting Tips
<span class="tips-icon"></span>
</div>
<div class="tips-message">
<p>
<span>Subject matters.</span> Keep it brief, clear and concise. Your subject is the only part of the message that shows in preview posts, so make it count.
</p>
<p>
<span>Don't get too personal.</span> This is a public forum, so don't share any personal info. See our house rules for more information.
</p>
<p>
<span>Stay on topic.</span> Include all relevant details in the body, and ask open-ended questions to encourage replies.
</p>
</div>
</div>
jquery:
;(function($){
'use strict';
$(function(){
var $post_tips = $('.posting-tips');
var $tips_icon = $post_tips.find('.tips-icon');
var $tips_message = $post_tips.find('.tips-message');
$tips_icon.on('click', function () {
$tips_message.slideToggle();
if ($post_tips.hasClass('open')) {
$post_tips.removeClass('open');
}else {
$post_tips.addClass('open');
}
});
});
})(LITHIUM.jQuery);
2018-07-10 at 2.20 pm.gif
html和jquery:
<div class="new-to-community">
<h2>
Welcome to Your Community
</h2>
<p>
Hi everyone,
</p>
<p>
Welcome to the AGL Community, a delicated online space to share, discuss, and learn about all things energy-related.
</p>
<p>
This community has been built by you, for you. Information, advice, ideas, and answers are just a few clicks away.
</p>
</div>
<div class="accordion-item-list">
<ul>
<li class="item">
<h3 class="title">
Community Basics
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
Our Community provide a place for members or participants to search for information, read and post about topics of interest, learn from each other share tips and experiences, and discuss topics like renewables, energy technulogy etc.
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
Need immediate, specific account/billing assistance?
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
While we want to help you effectively manage your energy, the Community is not suited to handle 1:1 service enquiries. To help with account and billing questions where you need to share sensitive information (i.e. your account and personal details), please contact us on <a href="http://aglener.gy/ChatFb">Facebook Messenger, chat</a> or call us 24/7 on <a href="tel:131245">131 245</a>.
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
Why register and become a member?
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
Feel free to <a href="https://community.agl.com.au/t5/Discussion-Topics/ct-p/discussion">browse discussion topics</a> and our <a href="https://community.agl.com.au/t5/FAQs/tkb-p/Knowledge-Base">FAQs</a> for information and answers.
</p>
<p>
Registering lets you take full advantage of the community, enabling you to give likes, vote on ideas, interact with other community members, or set customisation preferences.
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
Sign up options
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
Already have an AGL My Account or the AGL app? Use this same email address or <a href="/plugins/custom/aglenergy/aglsso/sso_login_redirect?returnTo=https%3A%2F%2Fcommunity.agl.com.au%2Ft5%2FGetting-Started%2Fbd-p%2Fgetting_started">log in</a> details to easily access and start contributing on the Community.
</p>
<p>
Not a current AGL customer? Don't already have an AGL online account? That's ok too! Our community is for anyone interested in chatting energy. <a href="/plugins/custom/aglenergy/aglsso/sso_login_redirect?referer=https%3A%2F%2Fcommunity.uat.agl.com.au%2Ft5%2FGetting-Started-New%2Fbd-p%2Fgetting-started#register">Join</a> up simply using your name and email address.
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
How to get involved
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
1. Review our simple ‘<a href="https://community.agl.com.au/t5/Getting-Started/The-AGL-Community-guidelines/m-p/4#M1">house rules</a>’ to be followed by all of our community members. We want you to feel at all times that your thoughts and opinions matter and are respected.
</p>
<p>
2. <a href="https://community.agl.com.au/t5/forums/searchpage">Search the Community</a> for information
</p>
<p>
3. View our FAQs for <a href="https://community.agl.com.au/t5/Knowledge-Base/tkb-p/Knowledge-Base">answers</a> and information published by experts
</p>
<p>
4. <a href="https://community.agl.com.au/">Ask your own question</a> or <a href="https://community.agl.com.au/t5/Discussion-Topics/ct-p/discussion">join an existing discussion</a>.
</p>
<p>
5. Let someone know that you appreciate their contribution. You’ll find a thumbs up icon-switch at the bottom of each post to give them a ‘like’
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
How to write a great post
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
1. Make your <span>subject</span> clear and concise including relevant keywords. Your subject is the only part of the message that shows in discussion topic preview posts. Remember not to share any personal information.
</p>
<p>
2. To encourage replies, in the <span>body</span> include all relevant details, especially for technical topics and ask ended questions
</p>
<p>
3. Help others discover your post by adding <span>Tags</span>. These are related single keywords or phrases. Enter them in the ‘Message Tags’ field separated by a comma
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
Feedback is welcome!
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
We want to hear what you think of the Community site. Good or bad, we don't mind. Add your feedback or suggestion to our <a href="https://community.agl.com.au/t5/Ideas/ct-p/ideas">Ideas Board here</a>. Or, you can private message the Community Manager if you're more comfortable doing it that way.
</p>
</div>
</div>
</li>
<li class="item">
<h3 class="title">
Meet your AGL Community team
<i class="icon-switch"></i>
</h3>
<div class="text">
<div class="text-outspace">
<p>
Your Community Manager is me - Sam, better known by my screen name <a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/2023">Samjy</a>. Our fabulous moderators are <a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/3830">Jayden</a>, <a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1979">The RealDaveyG</a> and <a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1603">Jordanemm</a>.
</p>
<ul class="managers-list">
<li>
<div class="avatar">
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/2023">
<img src="https://nepep88636.i.lithium.com/t5/image/serverpage/avatar-name/people-06/avatar-theme/candy/avatar-collection/AGL_Community/avatar-display-size/profile/version/2?xdesc=1.0" alt="Samjy">
</a>
</div>
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/2023" class="user-name">Samjy</a>
</li>
<li>
<div class="avatar">
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/3830">
<img src="https://nepep88636.i.lithium.com/t5/image/serverpage/avatar-name/people-21/avatar-theme/candy/avatar-collection/AGL_Community/avatar-display-size/profile/version/2?xdesc=1.0" alt="Jayden">
</a>
</div>
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/3830" class="user-name">Jayden</a>
</li>
<li>
<div class="avatar">
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1979">
<img src="https://nepep88636.i.lithium.com/t5/image/serverpage/avatar-name/people-19/avatar-theme/candy/avatar-collection/AGL_Community/avatar-display-size/profile/version/2?xdesc=1.0" alt="TheRealDaveyG">
</a>
</div>
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1979" class="user-name">TheRealDaveyG</a>
</li>
<li>
<div class="avatar">
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1603">
<img src="https://nepep88636.i.lithium.com/t5/image/serverpage/avatar-name/people-22/avatar-theme/candy/avatar-collection/AGL_Community/avatar-display-size/profile/version/2?xdesc=1.0" alt="Jordanemm">
</a>
</div>
<a href="https://community.agl.com.au/t5/user/viewprofilepage/user-id/1603" class="user-name">Jordanemm</a>
</li>
</ul>
<p>
If you have any queries or concerns, or just want to say hello, feel free to give us a shout!
</p>
</div>
</div>
</li>
</ul>
</div>
<@liaAddScript>
;(function($){
'use strict';
$(function(){
function accordionClick() {
var $accordionWrap = $('.accordion-item-list');
var $switch = $accordionWrap.find('.icon-switch');
$switch.on('click', function() {
var $curItem = $(this).parent('.title').parent('.item');
$curItem.hasClass('open') ? $curItem.removeClass('open') : $curItem.addClass('open');
var $this_text = $(this).parent('.title').parent('.item').children('.text');
$this_text.slideToggle();
});
}
accordionClick();
});
})(LITHIUM.jQuery);
</@liaAddScript>
1# jQuery实现头部，侧栏显示隐藏动画效果
.aside-pushy-right {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
transition: all 0.5s;
&.open {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
z-index: 1000;
}
}
用max-height代替display实现动画效果
max-height: 0;
transition: max-height 0.3s;
-moz-transition: max-height 0.3s;
-webkit-transition: max-height 0.3s;
overflow: hidden;
max-height: 150px;
