如何在滚动时将这些tagHover的位置靠近标签并且tagHover具有固定位置？ [英] How to keep position of these tagHovers close to tags while scrolling and the tagHover has fixed position?

查看：117
本文介绍了如何在滚动时将这些tagHover的位置靠近标签并且tagHover具有固定位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



然而，一旦我开始滚动，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; 
};



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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆