javascript - 如何使用 jquery 和 css 在固定标题导航栏中将头像图像调整为较小的图像

Question

我需要有关将 fixed 标题导航栏中的头像图片调整为较小图片的帮助。我创建了这个 DEMO 来自 codepen.io

当您在页面上向下滚动时，导航栏将固定。但是我想像推特一样向下滚动时在导航栏中添加一个头像。任何人都可以在这里帮助我吗？

JQuery

$(document).ready(function() {

    $('.globalHeader').scrollToFixed();
    $('.footer').scrollToFixed( {
        bottom: 0,
        limit: $('.footer').offset().top
    });
    var summaries = $('.summary');
    summaries.each(function(i) {
        var summary = $(summaries[i]);
        var next = summaries[i + 1];

        summary.scrollToFixed({
            marginTop: $('.globalHeader').outerHeight(true) + 10,
            limit: function() {
                var limit = 10;
                if (next) {
                    limit = $(next).offset().top - $(this).outerHeight(true) - 10;
                } else {
                    limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
                }
                return limit;
            },
            zIndex: 0
        });
    });
    $('#sponsor').scrollToFixed({
        marginTop: $('.globalHeader').outerHeight(true) + 10,
        limit: function() {
            var limit = $('.footer').offset().top - $('#sponsor').outerHeight(true) - 10;
            return limit;
        },
        minWidth: 1000,
        zIndex: 999,
        fixed: function() {  },
        dontCheckForPositionFixedSupport: true
    });

    $('#sponsor').bind('unfixed.ScrollToFixed', function() {
        if (window.console) console.log('sponsor preUnfixed');
    });
    $('#sponsor').bind('unfixed.ScrollToFixed', function() {
        if (window.console) console.log('sponsor unfixed');
        $(this).css('color', '');
        $('.globalHeader').trigger('unfixed.ScrollToFixed');
    });
    $('#sponsor').bind('fixed.ScrollToFixed', function() {
        if (window.console) console.log('sponsor fixed');
        $(this).css('color', 'red');
        $('.globalHeader').trigger('fixed.ScrollToFixed');
    });
});

CSS

.globalHeader {
  z-index: 90;
  background-color: #323949;
  position: fixed;
  width: 100%;
  border-bottom: 1px solid #3f4858;
  color: #fff;
  font-size: 40px;
  font-family: arial, sans-serif;
  -webkit-box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  box-shadow: 0px 0px 5px #000000;
}
.globalHeader_in {
  z-index: 99999;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-width: 960px;
  width: 100%!important;
  max-width: 1580px;
  height: 52px;
  left: 0;
  top: 0;
  padding: 0 20px 0 15px;
  margin: auto;
}
.profile-kapak-alani {
    width:100%;
    height:385px;
    background-position: center top;
    background-size: 100% auto;
    background-size:cover;
    border-bottom:1px solid #3f4858;
    background: #323949 url(icons/genis.png) repeat 0 0;
}
.profil-kapak-profil-resim {
    width:900px;
    height:385px;
    margin:0px auto;
    }
.profil-kapak {
    width:900px;
    height:385px;
    overflow:hidden;
    }
.profil-kapak img {
    width:900px;
    }
.profil-ana-etki-alani{
    width: 900px;
    margin: auto;
    padding: 52px 30px 0;
    overflow:hidden;
     border-radius:3px;
    -webkit-border-radius:3px;
    -o-border-radius:3px;
    -moz-border-radius:3px;
    }
.kullanici-profil-fotografi-alani {
    float:left;
    width:200px;
    height:200px;
    margin-top:-110px;
    margin-left:30px;
    position:absolute;
    padding:8px;
    z-index:5;
    background-color: rgba(50, 57, 73, 1);
    border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    -moz-border-radius:5px;
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.5) inset; 
    }
.kullanici-profil-fotografi-alani span {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  -webkit-border-radius:5px;
    -o-border-radius:5px;
    -moz-border-radius:5px;
}
.profil-fotografini-degistir {
    position:absolute;
    width:55px;
    height:35px;
    margin-top:-38px;
    margin-left:4px;
    }
.link-abonelik-takipci-fotograf-takip {
   width:100%;
   height:60px;
   position:relative;
   border-bottom:1px solid #3f4858; 
   background-color: #323949;
   border-top:1px solid #3f4858;    
   box-shadow: 0 -7px 5px -6px #000000;
   -webkit-box-shadow: 0 -7px 5px -6px #000000;
   -moz-box-shadow:0 -7px 5px -6px #000000;;
   -o-box-shadow:0 -7px 5px -6px #000000;;
    }
.la-t-f-t {
   width:900px;
   height:60px;
   margin:0px auto;
    }
.ll-p-t{
   float:right;
   width:630px;
   height:60px;
    }
.pay-t{
   float:left;
   width:88px;
   height:60px;
   padding-left:15px;
   padding-right:15px;
    }
.pay-t-t {
   font-weight:normal;
   color:#9aa2ae;
   font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
   font-size:11px;  
   margin-top:10px;
   float:left;
   width:88px;
   text-align:center;
    }
.p-t-t-a{
    font-weight:bold;
   color:#9aa2ae;
   font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
   font-size:18px;  
   text-align:center;
   margin-top:8px;
   float:left;
   width:88px;
    }
#navbar {

    position: absolute;
   width:100%;
  height:60px;
}
.main-content{
  width:100%;
  height:auto;
  overflow:hidden;
  background-color:red;
}
.content{
  margin:0px auto;
  width:900px;
  height:900px;
}
.footer {
    background-color: #eee;
    padding: 0px;
    clear: both;
}
.footer.scroll-to-fixed-fixed {
    color: red;
}

Answer 1

对于大背景图片，你可以简单地使用$(window).scroll()减慢滚动速度。您还需要将内容设置为 position: relative所以它位于溢出的背景图像之上(因为它会以更慢的速度滚动)。但是您的导航栏有一个动态添加的 z-index:auto这将导致它位于你的内容后面(可能来自插件)所以你必须使用 !important在你的 #navbar的 z-index:

JS

$(window).scroll(function(){
  var scrolled = $(this).scrollTop();
  $(".profil-kapak").css({"top":(scrolled*0.7)+"px"});

});

CSS

#navbar {
   position: absolute;
   width:100%;
   height:60px;
   z-index: 4 !important; //add, need to override the plugin
}

.main-content{
   width:100%;
   height:auto;
   overflow:hidden;
   background-color:red;
   position: relative; //add
}

对于迷你配置文件外观，您可以将导航栏中的容器设置为 display: none并在导航栏固定后使用较大的淡入/淡出:

HTML

<div class="mini-profile-wrapper">
   <div class="mini-profile-img">
      <img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg">
   </div>
   <p class="profile-name">John Doe</p>
</div>

CSS

.mini-profile-wrapper{
   display: none;
   float: left;
}

.mini-profile-img{
   display: inline-block;
   width: 80px;
   padding: 5px 5px 0 0;
   overflow: hidden;
   vertical-align: middle;
}

.mini-profile-img img{
   max-width: 100%;
   display: inline-block;
}

.mini-profile-wrapper .profile-name{
   display: inline-block;
   vertical-align: middle;
   font-weight:normal;
   color:#FFF;
   font-family: Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
   font-size:20px;  
}

您可以使用预先存在的 JS 函数

$('#navbar').bind('unfixed.ScrollToFixed', function() {
   ...
   $(".kullanici-profil-fotografi-alani").fadeIn();
   $(".mini-profile-wrapper").fadeOut();
});

$('#navbar').bind('fixed.ScrollToFixed', function() {
   ...
   $(".kullanici-profil-fotografi-alani").fadeOut();
   $(".mini-profile-wrapper").fadeIn();
});

CODEPEN