Question

我找到了这段代码。

   $(document).ready(function(){
	   $(window).bind('scroll', function() {
	   var navHeight = $( window ).height() - 70;
			 if ($(window).scrollTop() > navHeight) {
				 $('nav').addClass('fixed');
			 }
			 else {
				 $('nav').removeClass('fixed');
			 }
		});
	});

/*
Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS
Description: Create a sticky navigation bar that remains fixed to the top after scroll
Author: Stanislav Kostadinov
Author URI: http://stanislav.it
Version: 1.0.0 - 11.01.2014
*/

* {margin: 0; padding: 0;}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
	position: fixed; 
	top: 0; 
	height: 70px; 
	z-index: 1;
}

body {
	color: #fff;
	font-family: 'open-sans-bold'; 
	font-size: 18px;
	text-align: center;
}

/* Font Face Settings */
@font-face {
    font-family: 'open-sans-bold';
	src: url('../fonts/open-sans/OpenSans-Bold.eot');
    src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'),
		 url('../fonts/open-sans/OpenSans-Bold.ttf');
    font-weight: normal;
}	

/* Navigation Settings */
nav {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 70px;
	background: #fff;
}

nav li {
	display: inline-block;
	padding: 24px 10px;
}

nav li a {
	color: #757575;
	text-transform: uppercase;
}

section {
	height: 100vh;
}

/* Screens Settings */
#screen1 {	
	background: #43b29d;
}

#screen1 p {
	padding-top: 200px;
}

#screen2 {
	background: #efc94d;
}

#screen3 {
	background: #e1793d;
}

@media only screen and (max-width: 520px) {

	nav li {
		padding: 24px 4px;
	}

	nav li a {
		font-size: 14px;
	}

}

<section id="screen1">

	<p>Scroll down</p>

	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Team</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>

</section>
	
<section id="screen2"></section>
<section id="screen3"></section>

这是一个工作示例。 http://stanhub.com/tutorials/sticky-navigation/

它是一个粘性的菜单，效果很好，但问题是它只是粘贴然后页面全部向下滚动。是否可以在导航div向下滚动40px后修复它？让我们说它在导航框和顶部浏览器之间的40像素。

Answer 1

是的，更改代码中的变量 var navHeight = $（window）.height（） - 70;

要 var navHeight = $（window）.height（） - 40;

应该通过指定身高来解决您的问题

Answer 2

如果没有您发布代码，这是我根据您的描述做的最好的。

像这样更改您的Javascript：

var accessKeyId = config.s3.S3_KEY;
        var secretAccessKey = config.s3.S3_SECRET;
        AWS.config.update({
            accessKeyId: accessKeyId,
            secretAccessKey: secretAccessKey,
            apiVersion: {
                s3: "2006-03-01"
            }
        });
        AWS.config.region = "us-east-1";
        var s3 = new AWS.S3();
        var video = "user_" + Math.floor(Date.now() / 1000) + ".mp4";
        path = '';

        var bitmap = new Buffer(data.message, 'base64');
        fs.writeFile(video, bitmap, function (err) {

            if (err) {
                console.log("write file error")
                console.log(err);
                callback(err, {});
            } else {
                var bodyStream = fs.createReadStream(video);
                var params = {Bucket: 'bucket', Key: "users_videos/" + video, Body: bodyStream, ACL: 'public-read',ContentType: "video/mp4"};
                s3.putObject(params, function (err, dataa) {
                    if (err) {
                        console.log("inside putobject error");
                        console.log(err);
                        path = '';
                        callback(err, {});
                    }
                    else {
                        path = "http://xx.s3.amazonaws.com/users_videos/" + video;
                        console.log("Successfully uploaded data to Bucket");
                        console.log(path);

                        fs.unlink(video, function (err) {
                            if (err)
                            {
                                console.log(err);
                            }
                            console.log("deleted file");
                        });
                    }
            }

修复了div上的导航效果

2 个答案: