在内容滚动上调整侧栏的大小

Question

我试图为我的布局实现这个例子。 https://youtu.be/itV7jvKpWXc

当我水平滚动内容时，我的侧边栏应该在宽度上改变相同数量的水平滚动，直到我达到侧边栏的最小宽度？

任何接近它的简单方法？

Answer 1

添加到您的main-content onscroll

<div class="main-content" onscroll="resizeSidebar()"></div> 

在 javascript 中添加功能：

function resizeSidebar(){
   document.getElementById("sidebar").style.width = "50px";
}

您可以添加到侧边栏 css ：

.sidebar {
    transition: 0.5s;  
}

使用幻灯片打开动画

Answer 2

这是加减去我想要达到的目标，当我使用水平滚动时，当侧边栏缩小时它会使滚动条跳跃：D

＆＃13;

＆＃13;

$('.content').scroll(function() {    
    var scrolling = $(".content").scrollLeft();
    console.log(scrolling);
    if (scrolling >= 50) {
    		if(!$(".sidebar").hasClass('SmallSidebar')){
       		$(".sidebar").addClass("smallSidebar");
        }
    }
    else{
    	$(".sidebar").removeClass("smallSidebar");
    }
    if (scrolling >= 50) {
    		if(!$(".content").hasClass('smallContent')){
       		$(".content").addClass("smallContent");
        }
    }
    else{
    	$(".content").removeClass("smallContent");
    }
});

$(function(){
  var curDown = false,
      curYPos = 0,
      curXPos = 0;
  $('.content').mousemove(function(m){
    if(curDown === true){
     $('.content').scrollTop($('.content').scrollTop() + (curYPos - m.pageY)); 
     $('.content').scrollLeft($('.content').scrollLeft() + (curXPos - m.pageX));
    }
  });
  
  $('.content').mousedown(function(m){
    curDown = true;
    curYPos = m.pageY;
    curXPos = m.pageX;
  });
  
  $('.content').mouseup(function(){
    curDown = false;
  });
})

var width = 0;
$('.inner-content').each(function() {
    width += $(this).outerWidth( true );
});
$('.block').css('width', width);

＆＃13;

body { 
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
div {
 box-sizing: border-box; 
}
.wrapper {
  width: 100%;
  height: 100vh;
}
.sidebar {
  width: 33.33333%;
  float: left;
  background: blue;
  height: 100vh;
  transition: width 0.2s;
}
.sidebar.smallSidebar {
  width: 80px;
}
.content {
  width: 66.66666%;
  float: left;
  background: #171717;
  height:100%;
  overflow-y:hidden;
  height: 100vh;
  transition: width 0.2s;
  position: relative;
}
.content.smallContent {
  width: calc(100% - 80px);
}
.inner-content {
  height: 100%;
  padding: 50px 0px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  transition: width 0.2s;
  position: absolute;
}
.block {
  background: yellow;
    max-width: 320px;
    height: 400px;
    float: left;
    width: 100%;
    margin: 0 20px;
    box-sizing: border-box; 
    
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sidebar"></div>
 <div class="content">
 <div class="inner-content">
      <div style="background: #c39eb2;" class="block"></div>
      <div style="background: #a4af93" class="block"></div>
      <div style="background: #0fe7ad;" class="block"></div>
      <div style="background: #f75f31;" class="block"></div>
      <div style="background: #9473c0;" class="block"></div>
      <div style="background: #46087f;" class="block"></div>
      <div style="background: #f59000;" class="block"></div>
      <div style="background: #22e318;" class="block"></div>
      <div style="background: #71454e;" class="block"></div>
      <div style="background: #7eb544;" class="block"></div>
      <div style="background: #2fe218;" class="block"></div>
      <div style="clear: both;"></div>
 </div>
</div>
<div style="clear: both;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;