搜索到
2
篇与
的结果
-
Joe 主题 6.xx 增加顶部下拉隐藏，并显示文章标题 效果和本博客在查看文章时的效果一致，当下滑的时候，顶部会自动收起并显示文章的标题。原理没啥好讲的，就是监听下滚动时间，判断下滚动距离。教程添加到自定义css：@keyframes hideIndex { 0% { opacity: 0; transform: translate(0, 30px); } 100% { opacity: 1; transform: translate(0, 0); } } .post_no { display: none !important; } body #Joe { padding-top: 105px !important; } body #Joe > header { position: fixed; width: 100%; } body #Joe #post_top_title { font-size: 16px; line-height: 50px; font-weight: 600; width: 100%; animation: hideIndex 0.6s; -moz-animation: hideIndex 0.6s; -webkit-animation: hideIndex 0.6s; -o-animation: hideIndex 0.6s; } body #Joe #post_top_title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--main); } @media (max-width: 768px) { body #Joe { padding-top: 55px !important; } } 自定义js：$(document).ready(function(){ if (!document.querySelector("#post_top_title span").innerHTML){ return } let header = document.querySelector("header.joe_header") let row_above = $(".joe_header__above") let above_nav = $(".joe_header__above .joe_container:first-child") let below = $(".joe_header__below") let post_title = $("#post_top_title") let canSlideDown = true let canSlideUp = true let caluSideBar = function () { // 计算侧边栏最后一个元素的高度 let ele = $('.joe_aside__item:last-child') ele.css('transition','top 100ms'); ele.css('top', $('.joe_header').height() + 15) } let showNav = function(){ post_title.addClass("post_no") above_nav.removeClass("post_no") below.slideDown("fast",function (){ canSlideDown = true caluSideBar() }) } let hideNav = function(){ post_title.removeClass("post_no"); above_nav.addClass("post_no") below.slideUp("normal",function () { canSlideUp = true caluSideBar() }) } let lastScrollPos = 0 if(screen.width < 768) { $(window).scroll(function() { let scrollPos = $(window).scrollTop(); //得到滚动的距离 if (scrollPos > 395 && scrollPos < 505) return // 防止nav出现触发再次scroll if (scrollPos >= 450) { //比较判断是否fixed if (lastScrollPos > scrollPos && canSlideUp){ canSlideDown = false row_above.slideDown("fast",function (){ canSlideDown = true }) } else{ if (canSlideDown){ canSlideUp = false row_above.slideUp("normal",function () { canSlideUp = true }) } } } else { row_above.slideDown("fast",function (){ canSlideDown = true }) } lastScrollPos = scrollPos }) }else { let navOffw = header.offsetWidth if (post_title.length > 0 && navOffw > 750) { $(window).scroll(function() { let scrollPos = $(window).scrollTop(); //得到滚动的距离 if (scrollPos > 400 && scrollPos < 500) return // 防止nav出现触发再次scroll if (scrollPos >= 450) { //比较判断是否fixed if (lastScrollPos > scrollPos && canSlideUp){ //向上滚动举例超过100 canSlideDown = false showNav() } else{ if (canSlideDown){ canSlideUp = false hideNav() } } } else { showNav() } lastScrollPos = scrollPos }) } } }) 添加 html：在 Joe/public/header.php 文件顶部找到<header class="joe_header"> ----<div class="joe_header__above"> --------<div class="joe_container"> ------------xxxxx很多代码 --------</div> ----</div> // 找到这一个闭合的标签 说白了就是在 <div class="joe_header__above"> 这个标签对应的闭合标签</div>的前面插入：<header class="joe_header"> ----<div class="joe_header__above"> --------<div class="joe_container"> ------------xxxxx很多代码 --------</div> --------<div class="joe_container post_no" id="post_top_title"><span><?php if ($this->is('post')): ?><span><?php $this->title(); ?></span><?php endif; ?></div> ----</div> // 找到这一个闭合的标签，在前面插入 刷新一下大功告成。 -
极客学院 JS学习记录 以前只会些HTML，想学JS不知道从哪入门，最近一直在看极客学院的HTML5视频，终于对JS有点认识了。推荐大家看看：http://www.jikexueyuan.com/path/html5/不过它需要购买会员，验证邮箱和手机后，可体验5天免费VIP，我就这样看了几天，感觉很不错。可以配合上个月我发现的慕课网（纯免费），学习特有效果。 在极客标签上所以前收藏的TAB标签效果拿出来学习学习下，关键代码如下：网址：https://cmsblog.cn/pp/tab.html<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> <style>*{margin:0px;padding:0px; } .tab{width:600px;border:1px solid #ccc; margin:5px; } .tab ul.menu{height:40px; margin:0px; background:#f6f6f6;width:600px; } .tab ul.menu li{float:left;text-align:center;width:100px;height:38px;line-height:38px;list-style:none; border-right:1px solid #ccc;cursor:pointer;} .tab ul.menu li.active{background:#e1e1e1;color:#333; border-right:1px solid #ccc;} .tabc1,.tabc2,.tabc3,.tabc4{height:190px;border-top:1px solid #ccc;margin-top:-2px; padding:5px; } .tabc2,.tabc3,.tabc4{display:none;}</style> <body> <script>$(function () { $('.tab ul.menu li').click(function () { var Index = $(this).index(); objnb = Index; $(this).addClass('active').siblings().removeClass('active'); $('.tab').children('div').eq(Index).show().siblings('div').hide(); }); });</script><div class="tab"> <ul class="menu" > <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> <li>tab4</li> </ul> <div class="tabc1">1</div> <div class="tabc2">2</div> <div class="tabc3">3</div> <div class="tabc4">4</div> </div> <p>把click事件改成mouseover事件,可变成鼠标移到上面就显示</P>
