如何在滚动时将这些tagHover的位置靠近标签并且tagHover具有固定位置? [英] How to keep position of these tagHovers close to tags while scrolling and the tagHover has fixed position?
问题描述
然而,一旦我开始滚动,tagHover就会失去与您悬停的标签的相对位置。
.tags-container
其中有一个 overflow-y:auto;
显示滚动。
每个标签都有一个关联的标签悬停
指令
tagHover具有此样式(因此它们可以显示在标签列的约束之外。)
CSS
https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8
TagHover.html
< section class =tags-modalng-show =tghov.tag.hoverDisplayng-mouseleave =tghov.leave() >
< h1> Hover for:{{tghov.tag.term}}< / h1>
< / section>
var app = angular.module('plunker',['ui.bootstrap'])。component('tagHover',{// templateUrl:'tags_modal.html',template:`< section class =tags-modalng -how =tghov.tag.hoverDisplayng-mouseleave =tghov.leave()>< h1>悬停对象:{{tghov.tag.term}}< / h1>< / section> ,controllerAs:'tghov',bindings:{tag:'<'}} .controller('TagsHoverController',function(){}); app.controller('MainCtrl',function($ scope){}); app.component('myComponent',{bindings:{},// templateUrl:'tags.html',template:`< section class =tags-view>< div class =tags-column> ;< h1>标签< / h1>< div class =tags-container>< ul>< li ng-repeat =tgs.tags中的标签> < div class =tag-container-containerng-mouseleave =tgs.leaveTag(tag)> < div class =tag-container> < div class =tagng-mouseover =tgs.tagHover(tag)> {{tag.term}}< / div> < tag-hover tag =tag>< / tag-hover> < / DIV> < / DIV> < /锂> < / UL> < / DIV> < / DIV> < div class =tags-content> < div class =tags-box> < h2>标签内容< / h2> < / DIV> ($ scope,$ uibModal)函数TagsCtrl($ scope,$ uibModal) {/////////////////////////////////// this.hello =hello world; this.leaveTag =(tag)=> tag.hoverDisplay = false; this.tagHover =(tag)=> tag.hoverDisplay = true; this.tags = [{id:0,term:'apple'},{id:1,term:'butter'},{id:2,term:'charlie'},{id:3,term:'duff '},{id:4,term:'edward'},{id:5,term:'freddy'},{id:6,term:'george'},{id:7,term:'henry'} ,{id:8,term:'ink'},{id:9,term:'joker'},{id:10,term:'kevin'},{id:11,term:'leon'},{ id:12,term:'mary'},{id:13,term:'nancy'},{id:14,term:'olivia'},{id:15,term:'preston'},{id: 16,term:'quincy'},{id:17,term:'robyn'},{id:18,term:'steven'},{id:19,term:'teddy'},{id:词条:'ulysses'},{id:18,term:'victor'},{id:19,term:'winston'},{id:20,term:'xavier'},{id:20,term: 'yvette'},{id:21,term:'zander'}];}
/ *把你的c ss在这里* / body {font-family:Arial,sans-serif;}。tags-hover-container {float:left;位置:固定; z-index:101; left:240px; margin-top:40px;宽度:200px; height:auto;}。tags-column {z-index:1;向左飘浮;位置:相对;溢出-y:auto; margin-top:70px; max-width:230px; min-width:230px; height:calc(100% - 165px);}。tags-column li {list-style:none;}。tags-container {overflow-y:auto; height:320px;}。tag-container-container {float:left;位置:相对;宽度:100%; } .tag-container {float:left;位置:相对; } .tags-content {float:left;背景:#f0f0f0;}。tags-box {float:left; padding:20px; width:320px; height:640px;背景:#4169E1;}。tags-box h2 {color:#fff;}。tag {margin:0 10px 10px 0; padding:9px 10px;宽度:自动;颜色:#fff;背景:#3D3D3D; border-radius:4px;光标:指针; clear:both;}。tag:hover {background:#656565;}。tags-modal {float:left;位置:固定; z-index:101; left:100px; margin-top:-20px;填充:10px;宽度:200px;身高:自动;白颜色;背景:蓝色; border-radius:4px;}。tags-modal:before {position:absolute;顶部:-8px; left:26px; z-index:99;内容:'';显示:块;身高:0;宽度:0; border-bottom:8px纯蓝色; border-left:8px实体透明; border-right:8px solid transparent;}
< ;! DOCTYPE html>< html ng-app =plunker> < HEAD> < meta charset =utf-8/> < title> AngularJS Plunker< / title> < script> document.write('< base href =''+ document.location +'/>');< / script> < link href =style.css =stylesheet/> < script src =https://code.jquery.com/jquery-2.2.4.min.jsintegrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =crossorigin =anonymous>< / script> < script src =https://code.angularjs.org/1.5.4/angular.js>< / script> < script src =https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js>< / script> < script src =https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js>< / script> < script src =app.js>< / script> < /头> < body ng-controller =MainCtrl> <我的-成分>< / MY-成分> < / body>< / html>
最后!是的,没有CSS解决方案,我不得不弄清当前鼠标的位置,并使用ng-style来更新样式。
TickersPanelComponent < h3>
this.hoverTicker =(event,ticker)=> {
MousePosition.set(event);
const mouseY = MousePosition.current.y;
ticker.pos = {top:`$ {mouseY} px`};
ticker.hoverDisplay = true;
};
this.hoverTicker =(event,ticker)=> {
MousePosition.set(event);
const mouseY = MousePosition.current.y;
ticker.pos = {top:`$ {mouseY} px`};
ticker.hoverDisplay = true;
};
TickersPanel标记(包含传递给ticker的tagHover组件)
< div class =tag-containerng-mouseleave =tikp.leaveTicker(ticker)>
ng-mouseenter =tikp.hoverTicker($ event,ticker)
ng-click =tikp.selectTicker('portfolio',ticker) ;>
< span ng-if =ticker.long&&!ticker.hoverDisplay>
{{ticker.short}}
< / span>
< span ng-if =!ticker.long || ticker.hoverDisplay>
{{ticker.ticker}}
< / span>
< / div>
< / div>
MousePosition Factory
const set =(e)=> {
current.x = e.pageX;
current.y = e.pageY;
}
最后tagHover标记
< div class =ticker-hover-container
ng-style =tkhov.ticker.posng-show =tkhov.ticker.hoverDisplay> ;
^ tkhov
是 controllerAs
this
https://plnkr.co/edit/PuP3f71kCjkqgjjMkgNS?p=preview | Also have a stackoverflow snippet below.
Without scrolling the tagHovers will display correctly:
The problem
I think the problem is because I have a fixed
position set on the tagHovers tags-modal
class. However I need the fixed
position on that div so the tagHovers can break outside of the constraints of the .tags-container
.
Is there another way to achieve this effect without having to restyle the tagHovers so they have to fit inside the tiny width size of the tags-column
?
Correct position without scrolling
Once you scroll, position of the fixed tagHover breaks
However once I started scrolling, the tagHovers lose their relative position to the tag you hovered.
.tags-container
which has an overflow-y: auto;
To display scrolling.
Each tag has an associated tag-hover
directive.
The tagHovers have this styling (So they can be displayed outside of the constraints of the tags-column.)
CSS
https://gist.github.com/leongaban/eb2988a1ff01ada78ea0f663fd0432a8
TagHover.html
<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
<h1>Hover for: {{ tghov.tag.term }}</h1>
</section>
var app = angular.module('plunker', ['ui.bootstrap'])
.component('tagHover', {
// templateUrl: 'tags_modal.html',
template: `<section class="tags-modal" ng-show="tghov.tag.hoverDisplay" ng-mouseleave="tghov.leave()">
<h1>Hover for: {{ tghov.tag.term }}</h1>
</section>`,
controllerAs: 'tghov',
bindings : {
tag: '<'
}
})
.controller('TagsHoverController', function(){});
app.controller('MainCtrl', function($scope) {
});
app.component('myComponent', {
bindings: {},
// templateUrl: 'tags.html',
template: `<section class="tags-view">
<div class="tags-column">
<h1>Tags</h1>
<div class="tags-container">
<ul>
<li ng-repeat="tag in tgs.tags">
<div class="tag-container-container" ng-mouseleave="tgs.leaveTag(tag)">
<div class="tag-container">
<div class="tag" ng-mouseover="tgs.tagHover(tag)">{{ tag.term }}</div>
<tag-hover tag="tag"></tag-hover>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tags-content">
<div class="tags-box">
<h2>Tags Content</h2>
</div>
</div>
</section>`,
controllerAs: 'tgs',
controller: TagsCtrl
});
TagsCtrl.$inject = [
'$scope',
'$uibModal'];
function TagsCtrl(
$scope,
$uibModal) {
///////////////////////////////////
this.hello = "hello world";
this.leaveTag = (tag) => tag.hoverDisplay = false;
this.tagHover = (tag) => tag.hoverDisplay = true;
this.tags = [
{ id:0, term: 'apple'},
{ id:1, term: 'butter'},
{ id:2, term: 'charlie'},
{ id:3, term: 'duff'},
{ id:4, term: 'edward'},
{ id:5, term: 'freddy'},
{ id:6, term: 'george'},
{ id:7, term: 'henry'},
{ id:8, term: 'ink'},
{ id:9, term: 'joker'},
{ id:10, term: 'kevin'},
{ id:11, term: 'leon'},
{ id:12, term: 'mary'},
{ id:13, term: 'nancy'},
{ id:14, term: 'olivia'},
{ id:15, term: 'preston'},
{ id:16, term: 'quincy'},
{ id:17, term: 'robyn'},
{ id:18, term: 'steven'},
{ id:19, term: 'teddy'},
{ id:17, term: 'ulysses'},
{ id:18, term: 'victor'},
{ id:19, term: 'winston'},
{ id:20, term: 'xavier'},
{ id:20, term: 'yvette'},
{ id:21, term: 'zander'}
];
}
/* Put your css in here */
body {
font-family: Arial, sans-serif;
}
.tags-hover-container {
float: left;
position: fixed;
z-index: 101;
left: 240px;
margin-top: 40px;
width: 200px;
height: auto;
}
.tags-column {
z-index: 1;
float: left;
position: relative;
overflow-y: auto;
margin-top: 70px;
max-width: 230px;
min-width: 230px;
height: calc(100% - 165px);
}
.tags-column li {
list-style: none;
}
.tags-container {
overflow-y: auto;
height: 320px;
}
.tag-container-container { float: left; position: relative; width: 100%; }
.tag-container { float: left; position: relative; }
.tags-content {
float: left;
background: #f0f0f0;
}
.tags-box {
float: left;
padding: 20px;
width: 320px;
height: 640px;
background: #4169E1;
}
.tags-box h2 {
color: #fff;
}
.tag {
margin: 0 10px 10px 0;
padding: 9px 10px;
width: auto;
color: #fff;
background: #3D3D3D;
border-radius: 4px;
cursor: pointer;
clear: both;
}
.tag:hover {
background: #656565;
}
.tags-modal {
float: left;
position: fixed;
z-index: 101;
left: 100px;
margin-top: -20px;
padding: 10px;
width: 200px;
height: auto;
color: white;
background: blue;
border-radius: 4px;
}
.tags-modal:before {
position: absolute;
top: -8px;
left: 26px;
z-index: 99;
content: '';
display: block;
height: 0; width: 0;
border-bottom: 8px solid blue;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.3.1/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<my-component></my-component>
</body>
</html>
解决方案 Finally! Yeah there is no CSS solution to this, I had to figure out the current mouse y position and use ng-style to updated the styling on the fly.
TickersPanelComponent
this.hoverTicker = (event, ticker) => {
MousePosition.set(event);
const mouseY = MousePosition.current.y;
ticker.pos = { top: `${mouseY}px` };
ticker.hoverDisplay = true;
};
TickersPanel markup (contains tagHover component with ticker passed in)
<div class="tag-container" ng-mouseleave="tikp.leaveTicker(ticker)">
<div class="ticker"
ng-mouseenter="tikp.hoverTicker($event, ticker)"
ng-click="tikp.selectTicker('portfolio', ticker);">
<span ng-if="ticker.long && !ticker.hoverDisplay">
{{ ticker.short }}
</span>
<span ng-if="!ticker.long || ticker.hoverDisplay">
{{ ticker.ticker }}
</span>
</div>
<ticker-hover ticker="ticker"></ticker-hover>
</div>
MousePosition Factory
const set = (e) => {
current.x = e.pageX;
current.y = e.pageY;
}
Finally tagHover markup
<div class="ticker-hover-container"
ng-style="tkhov.ticker.pos" ng-show="tkhov.ticker.hoverDisplay">
^ tkhov
is the controllerAs
this
这篇关于如何在滚动时将这些tagHover的位置靠近标签并且tagHover具有固定位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文