如何使用离子滚动并在上方具有固定内容
我有以下观点：
<ion-view ng-controller="recentDetailCtrl as vm">
<ion-content class="has-header">
<div style="padding:0px;">
<my-video video-url='vm.videoUrl'
player-width="'100%'" player-height="'180px'"></my-video>
</div>
<ion-scroll>
<ion-list>
<ion-item ng-repeat="comment in vm.comments">
{{comment.text}}
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
</ion-view>
我想要的是要滚动的评论列表，但始终固定视频元素（因此它始终在视频下方滚动-类似于移动youtube应用允许您固定播放视频的同时滚动评论的方式）。
目前，当我滚动视频时，视频将移出视线。
问题答案：
- 将视频指令移出离子含量（离子含量中的所有元素都会滚动）。
- 更改离子含量的css，使其不占据屏幕的上半部分。
position:fixed在您的video指令中添加以及其他CSS，使其占据屏幕的上半部分。
HTML：
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Fixed Element at Top</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic Fixed Element at Top</h1>
</ion-header-bar>
<div class="fixed-header my-video">
My fixed video content
</div>
<ion-content class="ion-content-below-my-video">
<ion-list>
<ion-item>1</ion-item>
<ion-item>2</ion-item>
<ion-item>3</ion-item>
<ion-item>4</ion-item>
<ion-item>5</ion-item>
<ion-item>6</ion-item>
<ion-item>7</ion-item>
<ion-item>8</ion-item>
<ion-item>9</ion-item>
<ion-item>0</ion-item>
<ion-item>1</ion-item>
<ion-item>2</ion-item>
<ion-item>3</ion-item>
<ion-item>4</ion-item>
<ion-item>5</ion-item>
<ion-item>6</ion-item>
<ion-item>7</ion-item>
<ion-item>8</ion-item>
<ion-item>9</ion-item>
<ion-item>0</ion-item>
</ion-list>
</ion-content>
</body>
</html>
CSS：
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.fixed-header{
margin-top:43px;
/*
The ionic header bar is 43px in height,
put your content below the header bar.
*/
}
.platform-webview.platform-ios.platform-cordova .fixed-header{
margin-top:63px;
/* On iOS, moving a div out of ion-content,
I think you need to compensation for the 20px system status bar.
so it's 43px+20px=63px. but I'm not so sure, it hasn't been tested.
Test it yourself and make modifications if needed.
*/
}
.my-video
{
height:200px;
width:100%;
position:absolute;
background:grey;
color:red;
text-align:center;
padding:20px;
}
.ion-content-below-my-video{
margin-top:200px!important;
}
.platform-webview.platform-ios.platform-cordova .ion-content-below-my-video{
margin-top:220px;
/*
Same as .fixed-header
*/
}
代码笔在这里：
http://codepen.io/KevinWang15/pen/QNJEXX
-
问题内容： 我需要在网页上显示一个大表，并且需要防止第一列和第一行滚动。 我想动态设置此表的垂直大小（在某些静态大小的页眉/页脚页面内容之间），以使其尽可能高，而不必强制浏览器窗口具有垂直滚动条。 这仅需要在使用所有/任何版本的现代浏览器中工作：html，css，javascript，jquery 重要顺序： 具有许多表单字段，隐藏值，行的javascript折叠等的复杂表，稍后将添加 第一行将有
-
已解决的检查答案如下... 因此，我正在尝试为我的Android应用程序创建一个评论功能，我想在recyclerview中显示评论，然后在recyclerview下面有一个按钮和textview来添加评论。我想让recyclerview有一定的高度，如果有很多评论，它就可以滚动，因为我不想让用户不得不向下滚动屏幕才能找到add按钮。 我不能让它工作，所以我想知道是否有人有这个问题。 我的XML（滚
-
如何在css中设置固定背景并滚动？？？而且我一直试图设置一个背景来覆盖所有维度，因为我总是以模糊的背景结束：( 我在这方面相对较新，所以请不要评判我，这是我的css：body#bg{宽度：100%；高度：100%；位置：绝对；左：0px；顶部：0px；z-index：0；背景附件：固定； }
-
问题内容： 我实际上有两个问题，但是让我先解决主要问题，因为我认为另一个更容易解决。 我在菜单左侧的滚动条的左侧有一个固定位置的div。右侧是可以正确滚动的标准div。问题是，当浏览器的视口太小而看不到整个菜单时，..没有办法让它滚动到我能找到的位置（至少没有使用CSS）。我试过在CSS中使用不同的溢出，但是没有什么可以使div滚动。包含菜单的div设置为min- height：100％和posi
-
问题内容： 我有一个解决方案，可以使用较小的jQuery和CSS创建带有固定页眉/页脚的可滚动表-但我正在寻找一种方法，使之成为跨浏览器兼容的仅CSS解决方案。 需要明确的是，我所寻求要做的是使用 只有 一个标签（和它是有效的子标签，，，，，，，，），而是采用了一套将符合下列条件的CSS规则： 必须保持页眉/页脚/内容行之间的列对齐 当内容垂直滚动时，必须允许页眉/页脚保持固定 不得使用任何jQu
-
我的问题是，一旦页脚进入视口，侧边栏就不应该被修复。 我发现了几十个关于固定边栏的问题，但是我在这里找到的答案并没有解决我的问题。 我在这里发现了类似的东西，但我的问题是，我不能应用这个解决方案，因为我的超文本标记语言结构不同。我也希望你的答案是纯js而不是jQuery