JS博客实现侧边栏滚动至div导航栏后固定

2024-08-23

JS 实现DIV 滚动至顶部后固定

JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>DIV滚动至顶部后固定</title> </head> <body style="height:2000px;"> <div style="height: 200px"></div

想必大家应该见过这样的特效,本来头部是固定在网页的最上方的,点一下缩进去,再点一下又可以缩回来,这种效果怎么实现的呢,我今天就做了一个.菜鸟勿喷. @charset "utf-8"; /* CSS Document */ .main { width:1024px; height:768px; } #header { width:inherit; height:100px; background:url(indexBar.jpg) no-repeat top left; margin-

Node.js博客搭建

Node.js 博客搭建一. 学习需求 Node 的安装运行会安装node,搭建node环境会运行node. 基础模块的使用 Buffer:二进制数据处理模块 Event:事件模块 fs:文件系统模块 Net:网络模块 Http:http模块 ... NPM(node包管理工具) 第三方node模块(包)的管理工具,可以使用该下载工具安装第三方模块.,当然也可以创建上传自己的模块. 参考假定已经理解并掌握了入门教程的所有内容.在易出错的地方将进行简要的说明. 其它这是最不起眼,但也是最

Hexo - 快速，轻量，强大的 Node.js 博客框架

Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令就可以部署到 GitHub Pages,Heroku 或其他网站:拥有强大的插件系统,可以轻松扩展. 在线演示源码下载安装: $ npm install hexo-cli -g 创建博客: $ hexo init blog $ cd blog $ npm install 启动服务: $

Node.js 博客搭建

Node.js 博客搭建:https://www.linuxidc.com/Linux/2017-02/140115.htm https://www.cnblogs.com/mrcln/p/9308729.html

Node.js 博客实例（一）简单博客

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第一章.因为版本号等的原因,在原教程基础上稍加修改就可以实现. 环境: win7旗舰版64位 Node.js:0.10.31 mongodb:2.6.4 express:3.× 效果: 注冊界面: 登录界面: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZG9uZ3NoYW9zaHVhaQ==/font/5a6L5L2T/fontsize/400/fil

Node.js 博客实例（六）留言功能

原教程https://github.com/nswbmw/N-blog/wiki/_pages的第六章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 实现用户给文章留言的功能,留言保存在数据库中. post.js .改动 Post.prototype.save 中要存入的文档为: //要存入数据库的文档 var post = { name: this.name, time: time, title: this.title, post: this.post, comments:[] };

Node.js 博客实例（五）编辑与删除功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第五章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 如今给博客加入编辑文章与删除文章的功能. 当一个用户在线时,仅仅同意他在自己发表的文章页进行编辑或删除,编辑时,仅仅能编辑文章内容,不能编辑文章标题. 在style.css ,加入例如以下样式: .edit{margin:3px;padding:2px 5px;border-radius:3px;background-color:#f3

Digitalocean+DNSPod搭建Meteor.js博客Telescope.js

1. 什么是Meteor.js 基于Node.js的一个快速开发平台. 简言之,Node.js>Meteor.js 对等于Ruby>Ruby on Rails的关系. 官网:http://www.meteor.com/ 2. 什么是Telescope 一款开源博客系统,目标是取代wordpress. 因为这货是用Meteor.js开发的,取代的可能性还是挺大的.因为Meteor.js相对于传统语言具有零延迟,客户端数据库缓存,单页,快速原型,纯Javascript(前后端都是)等无数优点.不过

node.js博客GitHub搭建（hexo）

教程参考官网提供的: https://hexo.io/zh-cn/ 教程: https://hexo.io/zh-cn/docs/ 我的node.js环境: hexo博客全程采用markdown进行编写,所以这个是一个完成没有后台的系统,新建文章直接采用如下命令: hexo new "test" 会自动生成markdown文件放置在[~/blog/source/_posts/test.md] 主要搭建步骤: npm install hexo-cli -g hexo init blog

Node.js 博客实例（三）添加文件上传功能

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第三章上传文件眼下有三种方法: 使用 Express 自带的文件上传功能,不涉及数据库使用 Formidable 外部模块,不涉及数据库上传到 MongoDB ,涉及数据库这里使用第一种,用户将文件上,存储于:blog/public/images/文件夹下. blog/views/header.ejs 在<span><a title="发表" href=&quo

开发小白也毫无压力的hexo静态博客建站全攻略 - 躺坑后亲诉心路历程

目录基本原理方法1 - 本机Windows下建站 (力荐) 下载安装node.js 用管理员权限打开命令行,安装hexo-cli和hexo 下载安装git 初始化hexo 使用hexo generate生成静态资源在本地运行hexo,看一切是否正常在Coding.net创建与用户名相同的项目,并启用代码的pages功能启用通过git将hexo部署到远程的功能使用_config.yml来配置hexo 使用hexo clean && hexo g && hexo d

如何用jQuery实现在鼠标滚动后导航栏保持固定

要实现如下效果,鼠标滚动后,上方导航栏置顶固定关键html代码: <div class="header-bottom"> <div class="container"> <div class="logo"> <a href="home"><img src="static/web/images/logo.png" alt="远地资产 "

通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部（一）

回到顶部实例一效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; height: 3000px; /*让滚动条出现*/ } .DW { display: f

iOS UITableView表视图滚动隐藏UINavigationController导航栏

UITableView 继承于UIScrollView 所以UIScrollView 的代理方法相同适用于UITableView 中隐藏导航栏的方法为: self.navigationController.navigationBar.hidden = YES; 所以我们仅仅有通过滚动的代理方法监測滚动视图的滚动方向来控制导航栏显示还是隐藏就可以: 通过实现UIScrollView的代理方法来操作: 方式例如以下: // 滑动scrollView,而且手指离开时运行.一次有效滑动,仅仅运行一次.

超强js博客值得学习！！！

再读ecmascript 摘要: 这几天,又花了点时间看了下ecmascript.以下是我摘录出来的一些理解.在此记录下.第一部分:关于变量对象的理解1) 什么是变量对象?数据的存取与读取机制,就是变量对象. 变量对象是执行上下文相关的对象,包括3种:变量 (var )函数定义(FD)函数形参2) 关于函数的argumentsfunction foo(x,y,z){ z=40; y=50; alert(arguments.callee===foo); alert(arguments.lengt

Node.js 博客实例（十）pv统计和留言统计

原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第十章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. post.js中将var post={...}修改为(每次修改此处之后都要将e:/mongodb/blog/清空): //要存入数据库的文档 var post = { name: this.name, time: time, title: this.title, post: this.post, tags:this.tags, comm

点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的方向,是正或者是负.最后利用onmouseover和onmouseout,实现DIV的事件. 代码: <head runat="server"> <title></title> <style type="text/css">

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

最新博客链接 Github链接查看此文档前应先了解,vuepress基本操作参考官方文档进行配置: vuepress-theme-reco VuePress SamKirkland / FTP-Deploy-Action 最终效果最终效果链接思路下载vuepress-theme-reco官方的主题模板(脚手架),再根据自己的需要进行相应的修改,再根据自己的服务器配置Github Actions文件,最后上传到Github,触发Github Actions自动构建部署到第三方服务器.以后

菜鸟博客装饰分享CSS+HTML+js

博客布局更改,各种百度,自己修改,搞成现在这样,有兴趣的朋友可以复制我下面的把自己博客覆盖了,然后在进行更改不懂可加群问我:675678830 如果想开通打赏,用到js,需要在下列中博客侧边栏公告处开通下博客园首页-管理-设置-- 页面制定CSS代码: #navList { min-height: 35px; float: left; }#navList li { float: left; margin: 0 4px 0 0; } #site_nav_under { display:

在阿里云ECS CentOS7上部署基于MongoDB+Node.js的博客

前言:这是一篇教你如何在阿里云的ECS CentOS 7服务器上搭建一个个人博客的教程,教程比较基础,笔者尽可能比较详细的把每一步都罗列下来,包括所需软件的下载安装和域名的绑定,笔者在此之前对Linux系统也是了解甚少,通过这个过程,自感学到很多东西,我喜欢用文字整理并且分享,也希望因此交到更多的朋友,可能以下教程存在很多描述不清或者措辞不当的地方,还请资深人士给予指出.即使你是小白,也没关系,一步一步按照教程来,可能会遇到一些困难,多百度一下,或者跟我交流,都OK的.在教程之前,你需要对整个流